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

2

これは、そのテーブルが React 対応のコンポーネントではないためです!

これは、bootstrap-table がすべてのテーブルを初期化した後にテーブルが作成されたために発生します。これは、React の動作が異なるため、React でサードパーティの非 React コンポーネントを使用する場合に問題になります。React は、レンダリングが必要な場合にのみコンポーネントをレンダリングします。これが、ページのパフォーマンスが高い理由の 1 つです。不必要にレンダリングしません。しかし、これにはサードパーティの非 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 に答える