將react 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/示例

這將幫助您編寫模塊代碼。 您可以輕松地在單獨的文件中編寫代碼。