Как в react правильно управлять Dom?

Question

[madc0de]

Хотелось бы понять как правильно работать с DOM в реакт, когда, например, есть 20 элементов, которые нужно анимировать с помощью gsap.
gsap.to(elem, ....)

1) Каждому элементу задавать ref={elem1}, вначале функции создавать константу const elem = useRef();
2) Создать одну константу с массивом const elems = useRef([]) и сохранять в нее элементы ref={el => elems.current.push(el)} и держать в уме нумерацию ))
3) Задать родителю ref={page} и обращаться к элементам через page.querySelector('.elem')

Первый элемент следуя документации очень громоздкий и кол-во создаваемых переменных пугает.
Второй будет выглядеть прилично, если добавить ключи
Третий способ так скажем "не по react'овски"

Может есть еще какой способ?
И какой вариант наиболее правильный когда есть много элементов, которые нужно анимировать?

Comments

[Vladimir Lewandowski]

Почему не рассматриваете вариант вынести анимируемый элемент в отдельный компонент и там уже один ref?

[madc0de]

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