React Spring - дождитесь значения перед настройкой анимации - PullRequest
Новая
       11

React Spring - дождитесь значения перед настройкой анимации

0 голосов
/ 13 июня 2019

Попытка сделать некоторые SVG-анимации с React Spring .Это работает нормально, но я хочу вычислить некоторые значения из SVG-пути в компоненте.Так как теперь ref сначала возвращает null, а затем обновляется с ref, и в этот момент я могу получить длину пути SVG.

Однако, если я оберну все с помощью if(path.current) { ... }, я получуошибка в моем лице: 

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.)

Так что мне нужно сделать, чтобы useSpring подождал, пока у меня не появится значение, необходимое для настройки анимации?

Песочница здесь

Сокращенный код проверки: 

const Squiggle = () => {
  const path = useRef(null);
  const pathLength = path.current.getTotalLength();
  console.log(pathLength); // returns null first, then length

  const props = useSpring({
    config: { duration: 10000 },
    x: 0, from: {x: 1000}, // want to set x to pathLength when it's available
  })

  return (
    <animated.svg         
      strokeDashoffset={props.x}
    >
      <path ref={path} d="M1 11.888s75.363-8.751 179-4.916c0 0-111.86 10.72-139.164 23.028 0 0 72.003-7.334 106.835-4.581"/>
    </animated.svg>
  )
}
...