将react js组件拆分为单独的文件——并处理基于仪表板的应用程序的创建

我正在考虑使用reactjs作为一个框架来管理/控制各种图表小部件。

—当我开始寻找将这些组件放入单独的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')
          );