时间戳

首页 > 解决方案 > 如何在移动菜单中使用 redux 切换嵌套链接组件

reactjs - 如何在移动菜单中使用 redux 切换嵌套链接组件

问题描述

我创建了一个响应式菜单，它共享一个导航组件，其中嵌套了一个链接组件。所以工具栏>导航>链接。我还有一个侧边栏（移动菜单），它共享导航和链接组件：侧边栏 > 导航 > 链接。

所以我在切换关闭和菜单图标以及显示和隐藏不使用 Redux 的移动侧边栏方面取得了一些成功。但是我意识到嵌套，在父子之外传递道具对我不起作用，所以我决定尝试 Redux，但设置有点复杂，我尝试使用 console.log 来查看发生了什么，但操作没有'似乎没有订阅或某些东西没有连接到更新状态。

有人可以帮我看看发生了什么吗？

项目的编辑器在这里，虽然上面有 ES5/ES6 转换问题，但我尝试在那里安装 Babel，但不确定如何在 Stackblitz 上解决。那里的代码和文件结构： https ://stackblitz.com/edit/react-xey1dv

标签： reactjsredux

解决方案

首先，您必须更改 mapStateToProps 以收听特定的道具值，例如减速器中的“isOpened”。

const mapStateToProps = state => {
  return {
    isOpened: state.isOpened
  };
};

然后在 toggleNav 中你应该使用 'this.props' 检查这个对象的状态，

if (!this.props.isOpened) {
      openNavigation();
      console.log('active');
    }
    else {
      closeNavigation();
      console.log('not-active');
    }

推荐阅读