在Html寫好的HighChart,遷移入react Ant框架中使用
阿新 • • 發佈:2018-12-05
失敗的方法:
// 方案一: /* { 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 ( '' ); } }