时间戳

首页 > 解决方案 > 动态更新侧边栏中的菜单

reactjs - 动态更新侧边栏中的菜单

问题描述

我有一个侧边栏组件，它支持要显示的菜单项。

但菜单项会根据当前呈现的页面不断变化。如何从子组件更新菜单项。

应用程序.js

内容

const items = [
    { path: '/home', label: 'Home' },
    { path: '/about', label: 'About' },
]
<Container fluid>
            <Row>
                <Col xs={3} id="sidebar-wrapper">      
                  <Sidebar items={items}/>
                </Col>
                <Col  xs={9} id="page-content-wrapper">
                <Routes />
                </Col> 
            </Row>

  </Container>

Sidebar.js

返回 （

        <Nav className="col-md-12 d-none d-md-block sidebar">
        {items.map(({ label, name, ...rest }) => (
            <Nav.Item key={name} button {...rest}>
            <Nav.Link href={name}>{label}</Nav.Link>
            </Nav.Item>
        ))}
        
        </Nav>

   
    );

现在，当页面滚动到 /about 时，项目将是

const items = [
    { path: '/contact us', label: 'contact' },
    { path: '/address', label: 'address' },
    { path: '/item 3', label: 'item 3' },
]

标签： reactjs

解决方案

  1. 集成redux到您的应用中以进行状态管理。
  2. 在 store 中创建一个单独的 store 变量sideBarItems，并在path.
  3. 在您的组件Sidebar.js中，映射sidebarItems，每次在商店中更新此变量时，都会呈现新的侧边栏项目。

推荐阅读