Установить classNames React Transition Group со сценой

Question

Я использую React Transition Group. У меня есть состояние classFade, и я установил classNames группы React Transition Group = classFade. Я хочу, чтобы при нажатии следующей кнопки, classFade='fadeRight', и контент исчезал бы вправо. Когда я нажимаю кнопку «Предыдущая», classFade='fadeLeft' и содержимое исчезает влево. Но группа перехода реакции принимает предыдущее значение, а не значение после того, как я его передам. Например, когда я нажал кнопку «Следующая кнопка», он получил мое исходное classFade пустое значение, а не 'fadeRight', только при повторном нажатии на следующую кнопку все пройдет успешно.

Мой этап:

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

React Transition Group:

<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

Answer 1

Моя проблема решена в 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>