javascript - 如何重用 react 表

标签 javascript php jquery reactjs

我正在尝试制作一个 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 组件并连接源及其那里?我在这里查看了其他答案,但它们似乎主要处理数据的可用性。

最佳答案

为了在 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,因此您需要使用 webpackbrowserify 来转译代码。

一个很好的教程链接 Webpack tutorial

关于javascript - 如何重用 react 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39998143/

相关文章:

javascript - 让我的表单正确输出

javascript - 如何使用 Node.js writeStream 将 JSON 数组写入文件?

php - 使用 php 代理的跨域 Ajax GET 请求

c# - 将焦点设置在屏幕顶部 jquery

javascript - 使用 jQuery 在 contenteditable 元素上模拟按键

javascript - 使用 NodeJS 生成服务器端 HighStock 图表

javascript - MS Dynamics 事件响应 POST : 500 Internal Server Error

php - WooCommerce 在插件付款前获取订单产品详细信息

php - 与 PHP 中的 MVC 相比,HMVC 的优缺点

jquery - Rails jquery tokeninput 返回 "not a function"