React.js + bootstrap-table 仅在第一次加载时工作,但转换会破坏 table
React.js + bootstrap-table working only on first load, but transitions break the table
使用http://bootstrap-table.wenzhixin.net.cn
这是我的组件,其中包含 table 代码:
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-->
);
}
});
如果我直接加载包含此 table 的页面,效果很好。但是,如果我使用 react-router 从另一个页面转换到该页面,则 table 不会加载。看起来加载 bootstrap-table.js 的文件已卸载。
这个 table 由外部库修改,不能很好地与 React 一起工作。
尝试 table 替代方案,例如 https://facebook.github.io/fixed-data-table/
或者看看这是否有效
var Component = React.createClass({
shouldComponentUpdate: function() {
return false;
},
render: function() {
Bootstrap table component React.js
也许你可以试试!!
那是因为 table 不是 React 感知组件!
发生这种情况是因为 table 是在 bootstrap-table 初始化所有 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') 清理初始化的 bootstrap-table 并释放内存。
因此对您的代码进行这些更改(更改在此处 <<<< 处突出显示):
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 ...
);
}
});
使用http://bootstrap-table.wenzhixin.net.cn
这是我的组件,其中包含 table 代码:
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-->
);
}
});
如果我直接加载包含此 table 的页面,效果很好。但是,如果我使用 react-router 从另一个页面转换到该页面,则 table 不会加载。看起来加载 bootstrap-table.js 的文件已卸载。
这个 table 由外部库修改,不能很好地与 React 一起工作。
尝试 table 替代方案,例如 https://facebook.github.io/fixed-data-table/
或者看看这是否有效
var Component = React.createClass({
shouldComponentUpdate: function() {
return false;
},
render: function() {
Bootstrap table component React.js
也许你可以试试!!
那是因为 table 不是 React 感知组件!
发生这种情况是因为 table 是在 bootstrap-table 初始化所有 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') 清理初始化的 bootstrap-table 并释放内存。
因此对您的代码进行这些更改(更改在此处 <<<< 处突出显示):
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 ...
);
}
});