Question

我正在尝试制作一个反应组件库，以便我可以在整个应用程序中使用它们。我有一个库的第一部分是一个表，这仍然处于测试阶段，但我无法弄清楚如何调用组件并在其调用的页面上创建它。目前这是它的工作方式。我昨天也开始在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>

然后我有反应成分。

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

嗯，你快到了。

以下是如何完成的：

Table.js

var Table = React.createClass({
      //Everything stays same here
});
var TableColumns = React.createClass({
// Stays same here too
});

var TableRow = React.createClass({
  // This remains same
});

//Export the table component
export default Table;

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>
<script>
 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);
</script>

Answer 2

要在HTML中使用表格组件，您需要使用module.exports导出它，因为您没有将ES6用于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

Answer 3

有几种方法可以使用React重用组件，但是因为你最近开始学习一些你可以使用的东西。

更喜欢靠实际的应用程序而不是浏览器，但为什么呢？您编写的代码是es5代码，您可以在ES6中编写更清晰，可重复使用的代码。
开始使用任何样板文件，这样您就不必在开始时深入了解webpack和其他复杂事物。
现在已经到了可重用性的程度，如果你将它用作webpack，它会将你的所有代码组合成一个js文件，你可以在你的网站上实现任何地方。

现在关于你的代码

检查这个，关于使用单独的js文件 https://facebook.github.io/react/docs/getting-started.html

它有一个重要的信息

请注意，某些浏览器（例如Chrome）无法加载Separate 文件，除非它是通过HTTP提供的。

如何重用反应表

3 个答案: