React.js + bootstrap-table работает только при первой загрузке, но переходы ломают таблицу

Использование 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, выгружается.


reactjs javascript twitter-bootstrap bootstrap-table react-jsx
person ninjaneer    schedule 12.05.2015    source источник
comment
Ninja, вы можете написать, работает ли решение Ninja?   -  person Matt    schedule 26.08.2015

Ответы (3)


arrow_upward
2
arrow_downward

Это потому, что эта таблица не является компонентом, поддерживающим React!

Это происходит потому, что таблица была создана после того, как bootstrap-table инициализировал все таблицы. Это проблема, когда вы используете сторонние компоненты, отличные от React, с React, потому что React работает по-другому. React отображает компонент только тогда, когда это необходимо. Это одна из причин, почему ваша страница настолько эффективна. он не отображается без необходимости. Но это имеет недостаток со сторонними компонентами, не относящимися к React, потому что эти компоненты предполагают, что у вас все загружено при загрузке страницы, и ничего не меняется позже, когда изменяется DOM. Эти сторонние компоненты, не относящиеся к React, понятия не имеют о жизненном цикле React.

Чтобы исправить это, в React есть метод жизненного цикла под названием componentDidMount, который вызывается после отображения всего компонента на экране. Здесь вы можете разместить инициализаторы вашего стороннего кода. Итак, вам нужно больше не использовать «переключение данных», а вместо этого напрямую вызывать Javascript (как подробно описано здесь: http://bootstrap-table.wenzhixin.net.cn/getting-started/#использование-через-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 ...
    );
  }
});
person Christian    schedule 31.05.2015

arrow_upward
5
arrow_downward

Это компонент таблицы начальной загрузки для React.js.

Может быть, вы можете попробовать это !!

person Allen    schedule 31.05.2015

arrow_upward
1
arrow_downward

Эта таблица изменена внешней библиотекой, которая не будет работать с React.

Попробуйте альтернативную таблицу, например https://facebook.github.io/fixed-data-table/< /а>

или посмотреть, работает ли это

var Component = React.createClass({
  shouldComponentUpdate: function() {
    return false;
  },
  render: function() {
person Jason Als    schedule 12.05.2015
comment
Возникли проблемы с фиксированной таблицей данных. Говорит, что ``Object.assign` ошибка полифилла` при загрузке таблицы. Также вторая часть этого ответа определенно не является решением. - person ninjaneer; 12.05.2015