將js組件分割成單獨的文件 - 並處理基於儀表板的應用程序的創建

我正在使用reactjs作爲框架來管理/控制各種圖表小部件。將js組件分割成單獨的文件 - 並處理基於儀表板的應用程序的創建

- 當我開始將這些組件放入單獨的js文件時，未定義的錯誤開始出現。

- 那麼如何構建如何圖表應該面板，互動中如何實現上呈現 - 主/從關係 - 更新CTA

var config = [{ 
       "width": 200, 
       "height": 200, 
       "type": "piechart", 
       "serviceApi": "api.php?mode=GetCars" 
      }, { 
       "width": 100, 
       "height": 100, 
       "type": "barchart", 
       "serviceApi": "api.php?mode=GetBoats" 
      }, 
      { 
       "width": 200, 
       "height": 200, 
       "type": "piechart", 
       "serviceApi": "api.php?mode=GetCars" 
      }, 
      { 
       "width": 200, 
       "height": 200, 
       "type": "linechart", 
       "serviceApi": "api.php?mode=GetCars" 
      }]; 



      var MultipleCharts = React.createClass({ 
       getChart: function(config) { 
        switch (config.type) { 

         case 'piechart': 
          return <PieChart width={config.width} height={config.height} service={config.service} /> 
         case 'barchart': 
          return <BarChart width={config.width} height={config.height} service={config.service} /> 
         case 'linechart': 
          return <LineChart width={config.width} height={config.height} service={config.service} /> 
        } 
       }, 

       render: function() { 
        var config = this.props.config; 

        return (
         <div> 
          {config.map((chartConfig, index) => { 
           return (
            <div key={index} className={'holder' + index}> 
             {this.getChart(chartConfig)} 
            </div> 
          ) 
          })} 
         </div> 
       ); 
       } 
      }); 

      var PieChart = React.createClass({ 
       componentDidMount: function() { 
        var $this = $(ReactDOM.findDOMNode(this)); 
        console.log("rendered div now engage d3"); 
        // set el height and width etc. 
       }, 
       render: function() { 
        return (
         <div className="piechart" data-role="piechart" data-width={this.props.width} data-height={this.props.height} 
          data-service={this.props.service}>pie. 
         </div> 
       ); 
       } 
      }); 

      var LineChart = React.createClass({ 
       componentDidMount: function() { 
        var $this = $(ReactDOM.findDOMNode(this)); 
        console.log("rendered div now engage d3"); 
        // set el height and width etc. 
       }, 
       render: function() { 
        return (
         <div className="linechart" data-role="linechart" data-width={this.props.width} data-height={this.props.height} 
          data-service={this.props.service}>line. 
         </div> 
       ); 
       } 
      }); 



      var BarChart = React.createClass({ 
       componentDidMount: function() { 
        var $this = $(ReactDOM.findDOMNode(this)); 
        console.log("rendered div now engage d3"); 
        // set el height and width etc. 
       }, 
       render: function() { 
        return (
         <div className="barchart" data-role="barchart" data-width={this.props.width} data-height={this.props.height} 
          data-service={this.props.service}>bar. 
         </div> 
       ); 
       } 
      }); 


      ReactDOM.render(
       <MultipleCharts config={config} />, 
       document.getElementById('example') 
     );

來源

2016-08-19 The Old County