在Html写好的HighChart，迁移入react Ant框架中使用

最新推荐文章于 2024-05-23 16:08:37 发布

weixin_34034670

最新推荐文章于 2024-05-23 16:08:37 发布

阅读量79

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/180293/blog/1931455

版权

2019独角兽企业重金招聘Python工程师标准>>>

失败的方法：

 // 方案一：
    /*
      { typeof pvUvData.data !=='undefined' ? HighChartShow(pvUvData) : (<div id="highChart1">111</div>)}
      const HighChartShow=(data)=>{
        if(typeof data.data !=='undefined'){
         getData1(Highcharts,HighchartsTheme,data,'highChart1','size')
        }
      } 
      return;
    */
    // 方案二：
    /*
      <HighChartShow id="highChart1" data={pvUvData} />
      const HighChartShow=(id,data)=>{
        if(typeof id.data.data !=='undefined'){
          console.log('--------------',id.data)
          return getData1(Highcharts,HighchartsTheme,id.data,id.id,'size')
        }else{
          return (<div id={id.id} ></div>)
        }
      } 
      return;
    */

成功的方法：


写成独立组件：
import HighChart1 from './HightChartPvUv';

return （<div id="highChart1"></div>
 {typeof pvUvData.data !='undefined'? (<HighChart1 id="highChart1" data={pvUvData.data}  type="size" />) :'' }
）


HightChartPvUv.js


'use strict';
import React from 'react';
const Highcharts = require('highcharts'); 
import HighchartsTheme from './HighchartsTheme';

export default class HighChart1 extends React.Component {
    render() {
        const {
          id,
          data,
          type,
        } = this.props; 

    原迁入的代码放这里
    .....

    return (
            ''
        );
    }
}

转载于:https://my.oschina.net/u/180293/blog/1931455