красит все элементы списка красным
import { useRef, useEffect } from "react";
const Item = ({ element, pushNode }) => {
const node = useRef(null);
useEffect(() => {
pushNode(node);
}, [node]);
return <li ref={node}>{element}</li>;
};
const List = ({ elements, pushNode }) => {
return (
<ul>
{elements.map((element) => (
<Item element={element} pushNode={pushNode} />
))}
</ul>
);
};
const App = () => {
const elements = ["one", "two", "three"];
const nodes = [];
const pushNode = (node) => nodes.push(node);
const paintRed = (event) => {
nodes.forEach((node) => {
node.current.style.color = "red";
});
};
return (
<>
<List elements={elements} pushNode={pushNode} />
<button onClick={paintRed}>Paint it red</button>
</>
);
};
export default App;
elements - просто массив из стрингов которые как бы элементы
nodes - (будущий) массив рефов
pushNode - колбек который пушит в массив реф, его основная суть в том чтобы чистоту кода сохранять и не срать в глобальный скоуп из компонента
List - обычный ul который мапит elements создавая Item на каждой итерации
Item - обычный li внутри которого находится текст элемента из elements
Внутри Item создается реф на li, после того как компонент маунтится (чтобы сам реф появился) вызывается колбек который пушит реф в nodes, потом по нажатию кнопки средствами DOM’а красятся li’шки
