Блог

У меня есть компонент боковой панели, который принимает элементы меню для отображения.

но пункты меню продолжают меняться в зависимости от текущей отображаемой страницы. Как мне обновить элемент меню из дочерних компонентов.

app.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' },
]
  

1. Интегрируйте redux в свое приложение для управления состоянием.
2. Создайте отдельную переменную хранилища sideBarItems в хранилище и обновите ее на основе path .
3. В вашем компоненте Sidebar.js сопоставьте sidebarItems , каждый раз, когда эта переменная обновляется в хранилище, будут отображаться новые элементы боковой панели.