React-bootstrap 选项卡：DefaultActiveKey 锁定所选选项卡上的颜色变化

Question

我有一个奇怪的问题 - 我有三个带有 react-bootstrap 的选项卡，它们都按预期工作并按照逻辑暗示呈现。

但是，它确实会在选项卡 {1} 上初始化。但是，如果我选择另一个选项卡，它会正确初始化并呈现它，但所选选项卡的 "visual" 图形不会改变：它在第一个选项卡上仍然是粗体，而不是所选选项卡。

这是渲染的片段。我是不是做错了什么？

        <div>
            <Tab.Container id="tabs-with-dropdown" activeKey={store.key} onSelect={store.handleSelect} defaultActiveKey={1} >
                <div>
                    <NavigationBar store={store} />
                    <Tab.Content animation>
                        <Tab.Pane eventKey={1}>
                            <Panels />
                        </Tab.Pane>
                        <Tab.Pane unmountOnExit={true} eventKey={2}>
                            <Settings  />
                        </Tab.Pane>
                        <Tab.Pane unmountOnExit={true} eventKey={3}>
                            <Users />
                        </Tab.Pane>
                    </Tab.Content>
                </div>
            </Tab.Container>
        </div>

还有导航栏组件，您可以在其中导航选项卡 return 如下所示：

<div className="navbar navbar-inverse navbar-fixed-top" role="navigation"
                     style={{background: "#264b6b">
                    <div className="container-fluid">
                        <div className="navbar-header">
                            <div>
                                <Nav bsStyle="tabs" className="tabmenu"
                                     style={{
                                         position: "absolute",
                                         marginLeft: "14%",
                                         color: "white",
                                         backgroundColor: "#264b6b",
                                         borderBottom: "none",
                                         fontVariant: "small-caps",
                                         fontFamily: "'Open Sans', sans-serif",
                                         fontWeight: "400"
                                     }}>
                                    <NavItem eventKey={1}>
                                        panels
                                    </NavItem>
                                    <NavItem eventKey={2}>
                                        settings
                                    </NavItem>
                                    <NavItem eventKey={3}>
                                        users
                                    </NavItem>
                                </Nav>
                            </div>
                        </div>
                    </div>
                </div>

Tab {1} 将一直被样式标记为 "active"，这很奇怪；其他的安装并呈现在反应组件中。这有什么明显的原因吗？它一直工作到最近，我试图恢复旧的提交以找到问题，但这里的代码本身并没有真正改变。

如果我 console.log store.key 和 store.handleSelect 他们正确地将活动标签标记为 1、2 或 3，没有任何问题。

Answer 1

您使用受控选项卡，因此不需要 defaultActiveKey = 1，因为它仅用于不受控制的选项卡组件。您应该通过将 store.key 设置为您想要的选项卡来初始化您的选项卡。

React-bootstrap 选项卡：DefaultActiveKey 锁定所选选项卡上的颜色变化

React-bootstrap tabs: DefaultActiveKey locks the change of color on selected tab

tabs

reactjs

react-bootstrap