无论选择哪个选项卡,每次都会调用所有 React-bootstrap 选项卡渲染函数 [英] All React-bootstrap Tabs render function gets called every time regardless of which tab was selected
问题描述
以下是我的代码:
var WholeTab=React.createClass
({
getInitialState:function()
{
return {
key: 1
};
},
handleSelect:function(key)
{
this.setState({key});
},
render:function()
{
return (
<Tabs defaultActiveKey={1} id="controlled-tab-example">
<Tab eventKey={1} title="Tab 1"><One/></Tab>
<Tab eventKey={2} title="Tab 2"><Two/></Tab>
<Tab eventKey={3} title="Tab 3"><Three/></Tab>
</Tabs>
);
}
});
var One=React.createClass({
render:function(){
alert("one");
return(
<p>We are here</p>
);
}
});
var Two=React.createClass({
render:function(){
alert("two");
return(
<p>We are here</p>
);
}
});
var Three=React.createClass({
render:function(){
alert("three");
return(
<p>We are here</p>
);
}
});
我注意到的事情是,每当一个选项卡发生变化时,所有选项卡的渲染功能都会被调用,无论它们是否被选中,这种情况发生的不是一次,而是 3 次.这只是一个蹩脚的例子,但如果我在每个选项卡中都有很多内容,我上面描述的行为肯定会影响网页的性能并使其变慢.我做错了什么还是这是 react-bootstrap 选项卡的错误,因为从逻辑上讲,所有选项卡的渲染功能都不应该在每次更改时都被调用.
The thing which I have noticed is, whenever there is a change of a tab, the render function of all the tabs get called, regardless they were selected or not, and this happens not once, but 3 times. This is just a lame example, but if i have a lot of content in each and every tab, the behaviour I described above certainly affects the performance of the web-page and makes it slow. Am i doing anything wrong or is this a bug with react-bootstrap tabs because logically the render function of all the tabs should not get called on each and every change.
推荐答案
react-bootstrap Tabs
组件有一个布尔属性 unmountOnExit
使活动标签成为只有一个实际存在于 DOM 中.
The react-bootstrap Tabs
component has a boolean property unmountOnExit
which causes the active tab to be the only one actually present in the DOM.
此功能记录在 https://react-bootstrap.github.io/components/标签/
这篇关于无论选择哪个选项卡,每次都会调用所有 React-bootstrap 选项卡渲染函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!