Drawer 需要被孩子显示/隐藏，Redux 还是不Redux？答案

【问题标题】：Drawer needs to be showed / hidden by children, to Redux or not to Redux?Drawer 需要被孩子显示/隐藏，Redux 还是不Redux？
【发布时间】：2018-02-02 07:06:00
【问题描述】：

<Drawer type='temporary'>
  <SomeContainer>
</Drawer>

我可以：

A.) 在根 App 中存储状态，将 showDrawer / hideDrawer 一路向下传递给叶子组件

B.) 调度一个 showDrawer 或一个 hideDrawer 操作来减少 Redux 中的状态

哪种方式更有意义？还是我错过了一种明显而直接的方式？

【问题讨论】：

标签： reactjs react-redux material-ui

【解决方案1】：

哪种方式更有意义？或者是否有明显的和我错过了直接的方式？

不，你没有。反应的方式是提升状态，但是有一段时间提升状态意味着越深入越深入，这会变得乏味。那是您开始考虑 redux 的那一刻。这真的是开发人员选择最适合的。我更喜欢使用 redux。（明明还有更多好处，但我认为这是最重要的）

也就是说，还有其他选择。您可以将标志存储在 localStorage 或其他东西中，并让您的组件维护它。

【讨论】：

【解决方案2】：

从子元素与父元素通信的最快和最简洁的方法是通过 props 将回调函数传递给子元素。

class someClass {
   toggleDrawer() => {
   // toggle state of parent here
   }
   render() {
      <Drawer type='temporary'>
         <SomeContainer toggleDrawer={this.toggleDrawer}>
      </Drawer>
    }
}

出于性能原因，我不喜欢仅使用 redux 来在子级和父级之间进行通信。

【讨论】：

【解决方案3】：

这就是我最近的做法：我这样导入 MDC 抽屉：

import { drawer } from 'material-components-web/dist/material-components-web';

然后我添加了一些菜单图标，它将在点击时切换抽屉

  <img className="menu-icon" src={menuIcon} alt="Menu Icon" />

我还在菜单图标默认样式中加入了display: none;。然后，在这种情况下，对于我的标题组件，我想在窗口调整大小时显示它

@media (max-width: 1023px) {
  .menu-icon {
    display: block;
  }
}

这提供了在组件中执行以下操作的机会：

componentDidMount() {
    const $menuIcon = document.querySelector('.menu-icon');
    const $drawer = document.querySelector('.mdc-temporary-drawer');

    if ($drawer) {
        const drawerInstance = new drawer.MDCTemporaryDrawer(document.querySelector('.mdc-temporary-drawer'));

        if ($menuIcon) {
            $menuIcon.addEventListener('click', () => drawerInstance.open = true);
        }
    } 
}

如果菜单图标存在，我们将为其附加一个抽屉实例

【讨论】：