Добрый день, изучаю хуки, подскажите, пожалуйста, вот кусок кода const AnimatedPath

Question

Добрый день, изучаю хуки, подскажите, пожалуйста, вот кусок кода const AnimatedPath

= styled.path`
stroke-dasharray: 20;
fill: none;
stroke: #000000;
transition: stroke-dasharray 1000ms ease-in-out;
`
const AnimatePath = styled.path`
stroke-dasharray: 0;
`;

const SvgText = () => {
const { scroll } = useLocomotiveScroll();

const svg = useRef(null);

useEffect(() => {
// svg > AnimatedPath.animate ???
}, [])

return (
<SvgTextWrap>
<svg ref={svg}>
<AnimatedPath d="M33.085......
я хочу чтобы useEffect проиграл анимацию на svg когда компонент загрузится, как мне правильно это сделать используя реф? Как обратиться к дочернему компоненту? Я пытаюсь думать в рамках обычного JS, что я бы подцепил элемент через querySelector и ему класс навесил/стиль поменял, но это наверное не очень правильно.

#frontend #javascript #programming #react.js #russian

0

04.07.2021

5 ответов

15 просмотров

Tim Автор вопроса

вот поэтому и не хочу использовать способы обычного ЖС

0

04.07.2021

Zabashtevich

будешь стучаться в useRef вне useEffect - иногда будешь ловить ошибку, что компонента в useRef нет, потому что вызов произошел раньше рендера кода

0

04.07.2021

Zabashtevich

нет, там только 1 элемент

0

04.07.2021

Tim Автор вопроса

useRef положить в useEffect?

0

04.07.2021

Zabashtevich · Accepted Answer

Zabashtevich

когда стучишься до компонента через querySelector в React - жрешь много ресурсов. Всегда при вызове useEffect твой компонент отрендерен и находится в дом дереве, твой компонент, к которому ты пытаешься достучаться в useRef находится в svg.current

0

04.07.2021

169 похожих чатов

Добрый день, изучаю хуки, подскажите, пожалуйста, вот кусок кода const AnimatedPath

5 ответов

Похожие вопросы