如果showSecondTab值更改,则defaultActiveKey值会更改,第二个选项卡会显示并消失,但活动选项卡不会更改。 如果whol块被重新渲染它可以正常工作。 重新标记选项卡应该有问题。
<Tabs
unmountOnExit={true}
defaultActiveKey={showSecondTab ? 2 : 1}
id="allTabs">
<Tab eventKey={1} title="First tab">
<FirstTabContent />
</Tab>
{showSecondTab &&
<Tab eventKey={2} title="Second tab">
<SecondTabContent />
</Tab>
}
</Tabs>
如果代码是下一个代码,则没有变化。
createTabs() {
if(showSecondTab) {
return (
<Tabs
unmountOnExit={true}
defaultActiveKey={2}
id="allTabs">
<Tab eventKey={1} title="First tab">
<FirstTabContent />
</Tab>
<Tab eventKey={2} title=""Second tab">
<SecondTabContent />
</Tab>
</Tabs>
)
} else {
return (
<Tabs
unmountOnExit={true}
defaultActiveKey={1}
id="allTabs">
<Tab eventKey={1} title="First tab">
<FirstTabContent />
</Tab>
</Tabs>
)
}
}
render(){
{this.createTabs()}
}