React工程实践小结

---- 作者：RagamuffinNetworks / E

一. 调用antv或echarts等图表库的时候排版问题

1. 图表大多基于canvas实现

   

   （编译打包等步骤后浏览器中呈现的最终元素)

2. 许多图表实现的根元素会平铺到其父元素上，进而将其他元素挤出

   //代码1(图表组件会平铺到父元素上)，效果见图1
   <div className="chart-box" style={{border:'1px solid black'}}>
       <Column
           {...(productConfigHistogram(
               proportionOfRegionalHumanResources.data,
           ) as ColumnConfig)}
       />
       <!--<div style={{width:50,height:50,background:'red'}}></div>-->
   </div>

   

   ( 图1)

   //代码2(会将其他元素挤出)，效果见图2
   <div className="chart-box" style={{border:'1px solid black'}}>
     <Column
       {...(productConfigHistogram(
         proportionOfRegionalHumanResources.data,
       ) as ColumnConfig)}
     />
     <div style={{width:50,height:50,background:'red'}}></div>
   </div>

   

   ( 图2)

3. 除非需要重叠定位的情况，为了方便布局，最好将图表使用一个父元素包裹，且父元素内不要包括其他元素

   //示例
   <div className="chart-box">
     <div className="chart-box-inner" style={{border:'1px solid black'}}>
       <Column
         {...(productConfigHistogram(
           proportionOfRegionalHumanResources.data,
         ) as ColumnConfig)}
       />
     </div>
     <div style={{width:50,height:50,background:'red'}}></div>
   </div>

二. react等需要使用脚手架的项目需要使用地图时的情况

1. 如果仅需要使用地图展示，地点标记，多边形绘画等基本功能时，尽量使用react包装后的AMapAPI，若涉及到地点搜索等地图独立功能时，可以先去找找官方有没有提供相关的API

2. umi-react中包含的地图组件会有一些底层BUG(例如第一次进入页面报错空指针异常等，该问题暂时没能复现),可以使用react-amap代替

   // import { Map, APILoader, Marker } from '@uiw/react-amap';
   import { Map, Marker } from 'react-amap';

3. 若上述解决方案都满足不了业务需求,可以使用自定义script标签并对其进行onload绑定来解决依赖加载顺序问题

   //示例代码
   componentDidMount() {
       mapScript = window.document.createElement('script');
       mapScript.src =
         'https://webapi.amap.com/maps?v=1.4.15&key=yourKey';
       mapScript.onload = () => {
         let locScript = window.document.createElement('script');
         locScript.src =
           'https://webapi.amap.com/loca?v=1.3.2&key=yourKey';
         locScript.onload = () => {
           this.loadMap();
         };
         window.document.body.appendChild(locScript);
       };
       window.document.body.appendChild(mapScript);
     }

4. 除此之外,单独创建原生项目就可以使用地图官网的API了,之后使用iframe嵌入到原项目中也是一种解决方案，但需要解决项目之间的连通问题（譬如示例中使用共享token的方式进行联通）

   <div className="content-page" hidden={hidden}>
     <iframe
       src={`${targetUrl}?tokenHeader=${tokenHeader}&token=${tokenBody}`}
     ></iframe>
   </div>

三. 组合型项目（例如React+Vue混合项目）使用url传递参数时需要注意编码问题

1. 组合型项目指使用iframe等方式嵌合到一起的项目

2. 一般字符会正常传递，但空格等字符会被重新编码，如果传输的文本中包含空格等字符，需要注意此问题(关于url编码的原因和规则，可以查看文章:关于URL编码 - 阮一峰的网络日志)

   //代码
   request.get('/target?name=Y uan').then(result => {
     console.log(result)
   })

   

     (浏览器发出的请求地址)