Блог

У меня есть компонент React, который должен подписаться на контекст React и отобразить некоторый текст. Когда контекст обновляется, текст должен обновляться, но когда происходит это обновление, я хочу анимировать компонент со старым значением и анимировать его с новым значением. Я новичок в React Spring, но решил, что переход в их API Render-props поможет здесь запустить события анимации при монтировании и размонтировании соответственно.

Похоже, что команды From, Enter и Leave работают, и анимации воспроизводятся при изменении контекста, однако сначала это изменит содержимое контекста, а затем отобразит «Enter -> Leave» старого элемента одновременно с отображением «From -> Enter» для нового элемента, что приведет к дублированиюэлементы и неправильный текст отображаются при выходе «старого элемента».

Мой разум подсказывает мне, что мне нужно лучше использовать жизненные циклы для обработки дублированных элементов и, возможно, абстрагировать значение контекста, используя реквизиты из родительского компонента, а не использовать значение контекста напрямую, но здесь я могу ошибаться.

Итак, мой вопрос в том, как мне заставить анимацию Leave воспроизводиться со старым текстовым значением, а затем воспроизводить анимацию ввода с новым текстовым значением и отображать только один элемент за раз?

Кроме того, это мой первый вопрос здесь, поэтому, пожалуйста, дайте мне знать, если я делаю это неправильно.

 const TextComponent = () => {
  const contextData = useContext(Context);

  return (
    <Transition
      items={contextData.textToRender}
      from={{ opacity: 0, transform: 'translate3d(0%, -15%, 0)' }}
      enter={{ opacity: 1, transform: 'translate3d(0%, 0%, 0)' }}
      leave={{ opacity: 0, transform: 'translate3d(-15%, 0%, 0)' }}
    >
      {(condition) =>
        condition amp;amp;
        ((styles) => (
          <div style={styles}>
            <p className='station-text'>{contextData.textToRender}</p>
          </div>
        ))
      }
    </Transition>
  );
};
 

Обменялись идеями с другом, и мы нашли решение (в основном он нашел решение, если честно).

Во-первых, рендеринг правильных данных был простым недосмотром с моей стороны, поэтому вместо использования данных непосредственно из контекста мы фактически используем данные, которые мы передаем в transition API.

 <p className='station-text'>{text}</p>
 

Затем мой друг нашел запрос функции для «поэтапного рендеринга», который я искал.
https://github.com/pmndrs/react-spring/issues/1064

Поэтому мы сосредоточились на поиске обходного пути и поняли, что можем отправлять массивы в различные состояния анимации в API.

 enter={[{ display: 'none' }, { display: 'block', opacity: 1, transform: 'translate3d(0%, 0%, 0)' }]}
 

Это решает мой вариант использования и отвечает на мои вопросы.
Ниже приведен блок кода, который хорошо работает как с отдельными элементами, так и с элементами массива, и всякий раз, когда мы обновляем данные контекста, будет воспроизводиться правильная анимация, и новые компоненты будут созданы с новыми данными, как и предполагалось.

 <Transition
      items={[contextData.textToRender.firstString, contextData.textToRender.secondString]}
      from={{ opacity: 0, transform: 'translate3d(0%, -15%, 0)' }}
      enter={[{ display: 'none' }, { display: 'block', opacity: 1, transform: 'translate3d(0%, 0%, 0)' }]}
      leave={[{ display: 'block', opacity: 0, transform: 'translate3d(-15%, 0%, 0)' }, { display: 'none' }]}
    >
      {(text) =>
        text amp;amp;
        ((styles) => (
          <div style={styles}>
            <p className='station-text'>{text}</p>
          </div>
        ))
      }
 </Transition>