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

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

here's component containing 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 directly load page containing table. however, if use react-router transition page different page, table not load. looks if loads bootstrap-table.js got unloaded.

that's because table not react aware component!

this happens because table created after bootstrap-table initialised tables. problem when use third-party non-react components react because react works differently. react renders component when required rendered. 1 of reasons why page performant. doesn't render unnecessarily. has drawback third-party non-react components because these components assume have loaded on page load , don't change later when dom changes. these third-party non-react components have no idea react's lifecycle.

to fix this, react has lifecycle method called componentdidmount called once entire component rendered on screen. can put third-party code's initialisers here. need not use "data-toggle" anymore , instead call javascript directly (as detailed here: http://bootstrap-table.wenzhixin.net.cn/getting-started/#usage-via-javascript). once add code componentdidmount, code called every time component rendered. when change page or remove component page componentwillunmount called. here clean initialised bootstrap-table calling $(node).bootstraptable('destroy') , freeing memory.

so make these changes code (changes highlighted <<<< 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 , use ref              ... code ...     );   } });