UseRef внутри нескольких общих компонентов не возвращает объект ref
У меня проблема: мне нужно получить доступ к ссылкам в общем компоненте BaseTable. Например, для родительского компонента маршрута:
function Route() {
<div>
<BaseTable />
<BaseTable />
</div>
}
function BaseTable() {
const ref = useRef();
console.info(ref && ref.current);
return <table ref = {ref}>...</table>
}
Я ожидаю, что при рендеринге каждого BaseTable я увижу узел ref, однако я вижу его только на одном из дочерних элементов BaseTable, а другой возвращает только ноль.
Как ни странно (и, возможно, важно), когда я вношу изменения в файл и сохраняю, горячая перезагрузка затем подхватывает оба узла при повторном рендеринге. Когда у меня есть только один рендеринг BaseTable, ссылка установлена правильно, однако эта проблема возникает только при рендеринге нескольких компонентов BaseTable.
Ответы 1
Ваш код правильный.
Я думаю, вы запутались, потому что пишете в console в функции рендеринга.
При первом отображении функции ссылка будет undefined. Вместо этого используйте хук useEffect для записи в консоль после монтирования компонента и инициализации ссылки. Затем вы увидите, что ref.current — это элемент table.
function BaseTable() {
const ref = useRef();
useEffect(() => {
console.info(ref && ref.current);
}, []);
return <table ref = {ref}>...</table>;
}
Это должно сделать useEffect(() => { console.info(ref && ref.current); }, [])