2

使用http://bootstrap-table.wenzhixin.net.cn

这是我的包含表格代码的组件：

var Component = React.createClass({
  render: function() {
    return (
      <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
            <div className="row">
                <ol className="breadcrumb">
                    <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
                    <li className="active">Users</li>
                </ol>
            </div><!--/.row-->

            <div className="row">
                <div className="col-lg-12">
                    <h1 className="page-header">Tables</h1>
                </div>
            </div><!--/.row-->


            <div className="row">
                <div className="col-lg-12">
                    <div className="panel panel-default">
                        <div className="panel-heading">User List</div>
                        <div className="panel-body">
                            <table ref='table' data-toggle="table" data-url='http://localhost:3000/admin/users'  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
                                <thead>
                                    <tr>
                          <th data-field="firstName">First Name</th>
                          <th data-field="lastName">Last Name</th>
                          <th data-field="level">Level</th>
                          <th data-field="verified">Verified</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!--/.row-->

        </div><!--/.main-->
    );
  }
});

如果我直接加载包含此表的页面，它工作正常。但是，如果我使用 react-router 从其他页面转换到该页面，则不会加载该表。看起来好像加载 bootstrap-table.js 的那个被卸载了。

4

3 回答 3

5

它是React.js的Bootstrap 表组件

也许你可以试试！！

于 2015-05-31T06:43:55.547 回答
2

那是因为该表不是 React 感知组件！

发生这种情况是因为该表是在 bootstrap-table 初始化所有表之后创建的。当您将第三方非 React 组件与 React 一起使用时，这是一个问题，因为 React 的工作方式不同。React 仅在需要渲染时才渲染组件。这就是您的页面如此高效的原因之一。它不会不必要地渲染。但这对于第三方非 React 组件有一个缺点，因为这些组件假定您在页面加载时已经加载了所有内容，并且以后在 DOM 更改时不会更改任何内容。这些第三方非 React 组件不知道 React 的生命周期。

为了解决这个问题，React 有一个名为 componentDidMount 的生命周期方法，一旦整个组件呈现在屏幕上，就会调用该方法。您可以将第三方代码的初始化程序放在这里。所以你需要做的就是不再使用“data-toggle”，而是直接调用Javascript（详见这里：http ://bootstrap-table.wenzhixin.net.cn/getting-started/#usage-via-javascript ）。将代码添加到 componentDidMount 后，每次渲染组件时都会调用代码。当您更改页面或从页面中删除组件时，将调用 componentWillUnmount。在这里，您通过调用 $(node).bootstrapTable('destroy') 并释放内存来清理初始化的引导表。

因此，对您的代码进行这些更改（更改在 <<<< 此处突出显示）：

var Component = React.createClass({


  componentDidMount: function() {              <<<< here
    var node = this.refs.table.getDOMNode();   <<<< here
    $(node).bootstrapTable();                  <<<< here

  },

  componentWillUnmount: function() {          <<<< here
    var node = this.refs.table.getDOMNode();  <<<< here
    $(node).bootstrapTable('destroy');        <<<< here
  },


  render: function() {
    return (
             ... code ...
             <table ref='table' etc..         <<<<< here - remove data-toggle and use only ref
             ... code ...
    );
  }
});
于 2015-05-31T22:42:53.403 回答
1

这个表是由一个外部库修改的，它不能很好地与 React 一起工作。

尝试像https://facebook.github.io/fixed-data-table/这样的替代表

或者看看这是否有效

var Component = React.createClass({
  shouldComponentUpdate: function() {
    return false;
  },
  render: function() {
于 2015-05-12T02:07:59.833 回答