时间戳

首页 > 解决方案 > 使用阶段设置 React 过渡组的 classNames

reactjs - 使用阶段设置 React 过渡组的 classNames

问题描述

我正在使用 React 过渡组。我有 stateclassFade和一组classNamesReact Transition Group = classFade。我想要当我点击下一个按钮时，classFade='fadeRight'内容会向右淡出。当我单击上一个按钮时，classFade='fadeLeft'内容将向左淡出。但是反应过渡组采用以前的值，而不是我传递后的值。例如，当我点击下一步按钮时，它接收到我原来的classFade空值，而不是'fadeRight'，只有当再次点击下一步按钮时，它才会成功。

我的舞台：

const [items, setItems] = useState(
    { id: uuid(), text: 'Buy eggs', classFade: '' }
  );

反应过渡组：

<TransitionGroup>
  <CSSTransition
    key={items.id}
    timeout={500}
    classNames={items.classFade}
  >
    {items.text}
  </CSSTransition>
</TransitionGroup>

单击下一步按钮时的示例：

    setItems({
      id: uuid(),
      text,
      classFade: 'fadeRight',
    });

您可以在此处查看完整代码并运行演示：https ://codesandbox.io/s/transitiongroup-component-8x520

标签： reactjsreact-transition-group

解决方案

我的问题在https://github.com/reactjs/react-transition-group/issues/182中解决了。他们应该将此添加到文档中-.-

//This returns a childFactory to provide to TransitionGroup
const childFactoryCreator = (classNames) => (
  (child) => (
    React.cloneElement(child, {
      classNames
    })
  )
);

<TransitionGroup
  childFactory={childFactoryCreator(condition ? "anim1" : "anim2)}
>
  <CSSTransition
     key={key}
     classNames={condition ? "anim1" : "anim2"}
  >
     //Item that gets transitioned goes here
  </CSSTransition>
</TransitionGroup>

推荐阅读