如何遍歷 React ref 的嵌套元素

Question

您好，我正在嘗試a #header-nav中獲取所有標簽

const HeaderNav = (props) => {
// setState
const $target = useRef(null);
const $component = $target.current.querySelectorAll('a');

return (
    <nav id='header-nav' ref={$target}>
        <div id='shortcuts'>
            <a className='resources' href='#'>
                <span>0</span>
                <WidgetsIcon />
            </a>
            <a className='trash' href='#'>
                <DeleteSweepIcon />
            </a>
            <a className='history' href='#'>
                <RestoreIcon />
            </a>
        </div>
    </nav>)}

但是在Ref.current上運行querySelectorAll不起作用

    const $target = useRef(null);
    const $component = $target.current.querySelectorAll('a');

它返回 null，可能是因為querySelectorAll指的是尚未渲染的活動節點另外，因為我有很多標簽（比如 20 個），所以放置多個不同的 refs 並創建一個 refs 數組似乎不是最好的解決方案

如何遍歷 ref 結果？

Answer 1

我們應該把useRef結果放在useEffect鈎子里

const $target = useRef();
    useEffect(() => {
        const $component = $target.current.querySelectorAll('a');
    }, []);