重新渲染在react-bootstrap选项卡中无法正常工作

时间:2017-03-09 11:24:25

标签: reactjs tabs renderer react-bootstrap

如果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()}
}

0 个答案:

没有答案