React 和 Redux 的侧边栏转换？

Question

所以我有一个 SideDrawer，我在根 App 组件中像这样渲染：

  render() {
    const { isOpen } = this.props;
    return (
      <BrowserRouter>
        <SideDrawer />
        {/* isOpen && <SideDrawer /> */}
        <Routes ..../>
      </BrowserRouter>
    );
  }
}

这是减速器：

export const drawer = (state = initialState, { type, payload }) => {
  switch (type) {
    case CLOSE_DRAWER:
      return { ...state, isOpen: false };
    case OPEN_DRAWER:
      return { isOpen: true, movieId: payload };
    default:
      return state;
  }
};

而在SideDrawer 组件中，我使用抽屉的状态和css来处理转换：

export const SideDrawer = ({ isOpen, closeDrawer, movieId }) => {
  const drawerClass = cx({
    container: true,
    open: isOpen,
  });
  return (
    <div className={drawerClass}>
      <button className={styles.button} onClick={closeDrawer}>
        <img src={backButton} alt={text.alt} />
      </button>
      <MovieBanner movieId={movieId} />
    </div>
  );
};

现在，我的导师要我有条件地渲染 SideDrawer。如果isOpen 为真，则渲染 SideDrawer。但是，问题是转换不起作用，因为我只会在isOpen 的状态为真时渲染SideDrawer。它现在工作的唯一方法是，如果我一直在 App 组件上渲染它，这样我就可以跟踪状态并在状态从 false 更改为 true 时添加我的 CSS 转换

我的导师提到只有在 SideDrawer 打开时才渲染 SideDrawer，但我需要渲染它才能知道它以前的状态不是吗？

Answer 1

当一个元素从 DOM 中移除时，它将不再向用户显示。这也意味着transitions 不会对其产生影响。

如果您想使用过渡，请至少在过渡完成之前将元素保留在 DOM 中，或者一直如此。下面是两个<div>s的demo，第一个总是在DOM中，第二个只有当sidebarOn是true时：

function Demo() {
  const [sidebarOn, setSidebarOn] = React.useState(false)
  const toggleSidebar = () => setSidebarOn(!sidebarOn)
  
  return (
    <div>
      <button onClick={toggleSidebar}>toggle</button>
      <div className={'sidebar ' + sidebarOn}>always rendered</div>
      {sidebarOn && 
        <div className={'sidebar ' + sidebarOn}>only rendered when on</div>
      }
    </div>
  )
}

ReactDOM.render(<Demo />, document.getElementById('root'))

.sidebar {
  background-color: yellow;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 500ms;
}
.sidebar.true {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

---

存在transitionend event，您可以在过渡结束后使用它来删除元素，但目前浏览器中的支持还不够广泛。