javascript - 如何重用 react 表

Question

我正在尝试制作一个 react 组件库，以便我可以在整个应用程序中使用它们。我的库的第一部分是一个表，这仍处于测试阶段，但我无法弄清楚如何调用该组件并在其调用的页面上创建它。目前这就是它的工作原理。我昨天也刚刚开始使用 React 编程。

HTML

<script type="text/babel" src="/js/reactcomponents/table.js"></script>
<div id="loadboardContainer">
  <div class="table-desc">Future Loads</div>
  <div id="futureLoadsContainer"></div>

  <div class="table-desc">Todays Loads</div>
  <div id ="todaysLoadsContainer"></div>

  <div class="table-desc">Active Loads</div>
  <div id ="activeLoadsContainer"></div>
</div>

然后我就有了我的 react 组件。

var Table = React.createClass({
  getInitialState: function() {
    return {
      results: [],
      columns: []
    }
  },
  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function(result) {
      result = JSON.parse(result);

      if(result['resultRows'] == undefined){
        result['resultRows'] = [];
      }

      this.setState({
        results: result['resultRows'],
        columns: $.makeArray(result['resultCols'])
      });
    }.bind(this));
  },
  componentWillUnmount: function(){
    this.serverRequest.abort();
  },
  render: function() {
    // Set array for rows.
    var rows = [];
    var header = [];

    this.state.columns.map(function(cols) {
      header.push(<TableColumns data={cols.cols} key={cols.id} />);
    });

    this.state.results.map(function(result) {
      rows.push(<TableRow data={result.rows} key={result.id} />);
    });

    // Return the table.
    return (
      <table className="table table-condensed table-bordered no-bottom-margin">
        <thead>
          {header}
        </thead>
        <tbody>
          {rows}
        </tbody>
      </table>
    );
  }
});

// Set up columns
var TableColumns = React.createClass({
  render: function() {
    var colNodes = this.props.data.map(function(col, i){
      return (
        <th key={i}>{col}</th>
      );
    });
    return (
      <tr>
        {colNodes}
      </tr>
    );
  }
});

// Set up row
var TableRow = React.createClass({
  render: function() {
    var rowNodes = this.props.data.map(function(row, i){
      return (
        <td key={i}>{row}</td>
      );
    });
    return (
      <tr>
        {rowNodes}
      </tr>
    );
  }
});

var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');

ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);

当我将 table.js 文件导入到 html 时，这是有效的，但我希望它在组件使用中更加通用并删除

var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');

ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);

在 html/php 页面中调用，如下所示。

<script type="text/babel" src="/js/reactcomponents/table.js"></script>
    <div id="loadboardContainer">
          <div class="table-desc">Future Loads</div>
          <div id="futureLoadsContainer"></div>

          <div class="table-desc">Todays Loads</div>
          <div id ="todaysLoadsContainer"></div>

          <div class="table-desc">Active Loads</div>
          <div id ="activeLoadsContainer"></div>
        </div>

var futureContainer = document.getElementById('futureLoadsContainer');
    var todaysContainer = document.getElementById('todaysLoadsContainer');
    var activeContainer = document.getElementById('activeLoadsContainer');

    ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
    ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
    ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);

第一种工作方式工作正常，但如果我将 ReactDom.renders 删除到 html 页面，我实际上将组件放在上面，表明组件表不存在。无论如何，有没有办法做到这一点，所以稍后在应用程序中，当我有一个表时，我所要做的就是导入 table.js react 组件并连接源及其那里？我在这里查看了其他答案，但它们似乎主要处理数据的可用性。

Answer 1

为了在 HTML 中使用表格组件，您需要使用 module.exports 导出它，因为您没有使用 ES6 for React。

var Table = React.createClass({
      ...
});
var TableColumns = React.createClass({
...
});

var TableRow = React.createClass({
  ...
});

 //Export the table component
module.exports = Table;

此外，浏览器不支持 JSX，因此您需要使用 webpack 或 browserify 来转译代码。

一个很好的教程链接 Webpack tutorial