Попытка сделать некоторые 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>
)
}