Javascript React.js+;引导表仅在第一次加载时工作,但转换会破坏该表
使用 下面是我的组件,其中包含表代码:Javascript React.js+;引导表仅在第一次加载时工作,但转换会破坏该表,javascript,twitter-bootstrap,reactjs,react-jsx,bootstrap-table,Javascript,Twitter Bootstrap,Reactjs,React Jsx,Bootstrap 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
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-->
);
}
});
var Component=React.createClass({
render:function(){
返回(
用户
桌子
用户列表
名字
姓
水平仪
已证实的
);
}
});
如果我直接加载包含此表的页面,效果很好。但是,如果使用react router从其他页面转换到此页面,则不会加载该表。看起来加载bootstrap-table.js的已卸载。此表由一个外部库修改,该库无法与React一起正常工作 试着换一张像这样的桌子 或者看看这是否有效
var Component = React.createClass({
shouldComponentUpdate: function() {
return false;
},
render: function() {
这是React.js的一个示例
也许你可以试试 这是因为该表不是反应感知组件 这是因为该表是在引导表初始化所有表之后创建的。当您将第三方非React组件与React一起使用时,这是一个问题,因为React的工作方式不同。React仅在需要渲染组件时渲染该组件。这就是您的页面性能如此优异的原因之一。它不会不必要地渲染。但第三方非React组件有一个缺点,因为这些组件假定您在页面加载时加载了所有内容,并且在DOM更改时不会更改任何内容。这些第三方非React组件不知道React的生命周期 为了解决这个问题,React有一个名为componentDidMount的生命周期方法,当整个组件呈现在屏幕上时会调用该方法。您可以在此处放置第三方代码的初始值设定项。因此,您需要做的是不再使用“数据切换”,而是直接调用Javascript(如下所述:)。将代码添加到componentDidMount后,每次呈现组件时都会调用该代码。当您更改页面或从页面中删除组件时,将调用componentWillUnmount。在这里,您可以通过调用$(node).bootstrapTable('destroy')并释放内存来清理初始化的引导表
因此,对您的代码进行这些更改(在固定数据表有问题的地方会突出显示更改。在加载表时说``Object.assign`polyfill` error`)。此外,这个答案的第二部分肯定不是一个解决方案。如果Ninja的解决方案有效,您能写吗?
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 ...
);
}
});