Анимация реагирует на весну (с крючками против Render Props) - PullRequest
Новая
       19

Анимация реагирует на весну (с крючками против Render Props)

0 голосов
/ 26 марта 2019

Я просто пытался перейти от реквизита реагирования пружинного рендера к подходу на основе крючков.

В большинстве случаев решение было довольно простым, так как я бы сказал, что значения, которые я должен был использовать, были непосредственно анимируемыми.

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

Итак, у меня есть компонент карты мира, который берет центр упоров и масштабирование.Центр - это координаты в формате [число, число], а масштаб - это число. 

<WorldMap
  data={data}
  height={height}
  width={width}
  center={[x, y]}
  zoom={z}
  onMarkerClick={handleMarkerClick}
/>

Теперь, когда я анимирую его с подходом рендеринга реквизитов, он работает как положено. 

<Spring to={springTo} from={springFrom}>
    {({ z, x, y }) => {
      console.log(x, y, z);
      return (
        <WorldMap
          data={data}
          height={height}
          width={width}
          center={[x, y]}
          zoom={z}
          onMarkerClick={handleMarkerClick}
        />
      );
    }}
  </Spring>

Поскольку я верю в свойствах рендеринга, x, y и z являются числами (фактическими значениями)

Для основанного на хуках кода я использую: 

const AWM = animated(WorldMap);
const { x, y, z } = useSpring({ ...springTo, from: { ...springFrom } });

И часть рендеринга выглядит так:

<AWM
    data={data}
    height={height}
    width={width}
    center={[x, y]}
    zoom={z}
    onMarkerClick={handleMarkerClick}
  />

Я прикрепляю обе песочницы (на основе RenderProps и на основе хуков)

Любая помощь, чтобы понять это, будет оценена.

Крючки: https://codesandbox.io/s/0q8yjrz63l

Render Props: https://codesandbox.io/s/69114nj5k

Также при подходе, основанном на перехватах, я получаю сообщение об ошибке Предупреждение: Компонентам функций нельзя дать ссылки.Попытки получить доступ к этой ссылке потерпят неудачу.Вы имели в виду использовать React.forwardRef ()?

Плюс пара ошибок, которые ожидаются, учитывая, что значения являются анимированными значениями

Заранее спасибо за помощь.

...