处理导航项目选择的最佳方法是什么?

Question

我正在为我的一个应用程序使用 React + Redux。我想有一个导航的地方，有 2 个导航项目。我想根据用户操作处理导航项的更改。

我计划使用我的 redux 存储来设置一个状态来处理此更改。这是一个好方法还是请指导我提供更好的解决方案。我是这方面的初学者。

我的导航看起来像这样

<Nav {...props} activeKey={active} onSelect={onSelect} style={styles} appearance="subtle" justified>
<Nav.Item eventKey="nav-1">
Nav 1
</Nav.Item>
<Nav.Item eventKey="nav-2" >
Nav 2
</Nav.Item>
</Nav>

(为此使用 rSuite JS(

我对商店的初始状态将是这样的

const initialState = {
selectedNav: 'nav-1'
};

Answer 1

是的，我认为您走对了路，但是导航 1 和导航 2 不必知道父组件的状态

• 将 redux 状态作为 props 传递给父 Nav，然后从元素 props 渲染选定的 Nav。

<Nav  onSelect={onSelect} style={styles} appearance="subtle" justified>
{props.selectedNav === 'nav-1' && (
<Nav.Item eventKey="nav-1">
Nav 1
</Nav.Item>
)}
{props.selectedNav === 'nav-2' && (
<Nav.Item eventKey="nav-2" >
Nav 2
</Nav.Item>
)}
</Nav>

并为用户交互执行全局操作以更改活动 Nave。

注意： 您可以采用另一种方法，通过将 Nav 1 和 Nav 2 包装到开关组件中并呈现活动组件来获得更干净的代码。