React.js + bootstrap-table working only on first load, but transitions break the table

Question

Using http://bootstrap-table.wenzhixin.net.cn

Here's my component containing the table code:

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-->
    );
  }
});

It works fine if I directly load a page containing this table. However, if I use react-router to transition to this page from a different page, the table does not load. It looks as if the that loads bootstrap-table.js got unloaded.

Answer 1

That's because that table is not a React aware component!

This happens because the table was created after bootstrap-table initialised all tables. This is a problem when you use third-party non-React components with React because React works differently. React renders the component only when it is required to be rendered. That is one of the reasons why your page is so performant. it doesn't render unnecessarily. But this has a drawback with third-party non-React components because these components assume you have everything loaded on page load and don't change anything later when DOM changes. These third-party non-React components have no idea about React's lifecycle.

To fix this, React has a lifecycle method called componentDidMount which is called once the entire component is rendered on screen. You can put your third-party code's initialisers here. So what you need to do is not use "data-toggle" anymore and instead call the Javascript directly (as detailed here: http://bootstrap-table.wenzhixin.net.cn/getting-started/#usage-via-javascript). Once you add the code to componentDidMount, the code is called every time the component is rendered. When you change your page or remove the component from the page componentWillUnmount is called. Here you clean up your initialised bootstrap-table by calling $(node).bootstrapTable('destroy') and freeing up memory.

So make these changes to your code (changes are highlighted where <<<< here):

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 ...
    );
  }
});