私は奇妙な問題があります - react-bootstrap
という3つのタブがあり、それらはすべてロジックとして暗示されています。React-bootstrapタブ:DefaultActiveKeyは選択したタブの色の変化をロックします
ただし、実際にはタブ{1}
で初期化されます。ただし、別のタブを選択すると、正しく初期化されてレンダリングされますが、選択したタブの「ビジュアル」グラフィックは変更されません。選択したタブではなく、最初のタブで太字になります。
ここでは、レンダリングされる箇所を切り取っています。私は間違ったことをしましたか?
<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}
は奇妙であるスタイリングで、「アクティブ」のすべての時間としてマークされます。他のものは、反応構成要素に取り付けられレンダリングされる。これに対する明白な理由は何ですか?最近まで働いていましたが、古いコミットを元通りに復元しようとしましたが、ここでコード自体が実際に変更されたことはありません。
とstore.handleSelect
の場合、これらのタブはアクティブなタブを問題なく1、2、または3に正しくマークします。