Question

我有一个奇怪的问题 - 我有三个标签react-bootstrap，它们都按照预期工作并按照逻辑暗示进行渲染。

但是，它确实会在标签{1}上初始化。但是，如果我选择另一个选项卡，它将正确初始化并渲染它，但是＆＃34; visual＆＃34;所选标签的图形不会发生变化：第一个标签上的图形仍然是粗体，而不是选定的标签。

这里是它所呈现的片段。我做错了吗？

        <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>

导航选项卡的导航栏组件返回如下内容：

<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>

标签{1}将标记为＆＃34;有效＆＃34;所有的时间都是奇怪的造型;其他的安装和渲染在反应组件中。这有什么明显的原因吗？它一直工作到最近，我试图恢复旧的提交以找到问题，但这里的代码没有真正改变。

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

Answer 1

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

React-bootstrap选项卡：DefaultActiveKey锁定所选选项卡

1 个答案: