別のファイルに反応するjsコンポーネントを分割し、ダッシュボードベースのアプリケーションの作成を処理する

Question

reactjsをフレームワークとして使用して、さまざまなチャートウィジェットを管理/制御しています。

- これらのコンポーネントを別々のjsファイルに配置しようとすると、未定義のエラーが表示され始めました。

- その後、チャートは相互作用を実装する方法パネル、上にレンダリングする方法を構築する方法 - マスター/スレーブ関係 - 更新CTA

http://jsfiddle.net/cfrapLma/28/

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') 
     ); 

Answer 1

あなたが使用する必要がありますwebpackやgulpのようなビルドツールもあります。私はあなたがそれをやるべきであるという例を提供しています。それはあなたに役立つ

https://github.com/OnlyRefat/Example

はmodulerコードを記述します。別々のファイルに簡単にコードを書くことができます。