Переход на боковую панель с React и Redux?

Question

Итак, у меня есть SideDrawer, который я рендерил следующим образом в корневом компоненте приложения:

  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.Однако проблема в том, что переход не сработает, потому что я буду рендерить SideDrawer только тогда, когда состояние isOpen истинно.Единственный способ, которым он сейчас работает, - это просто отображать его все время на компоненте App, чтобы отслеживать состояние и добавлять свой переход CSS при изменении состояния с false на true

Мой наставник упомянул, что рендеринг SideDrawer возможен только в том случае, если SideDrawer открыт, но мне нужно, чтобы он отображался, чтобы знать его предыдущее состояние. Нет?

Answer 1

Когда элемент удаляется из DOM, он больше не будет отображаться пользователю.Это также означает, что transition s на это не повлияет.

Если вы хотите использовать переходы, сохраняйте элемент в DOM по крайней мере до тех пор, пока переходы не завершатся, или всегда.Вот демонстрация двух <div> с, первый всегда находится в 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 событие , которое вы могли бы используется для удаления элемента после завершения перехода, но в настоящее время поддержка в браузерах недостаточно распространена.