javascript - 使用 React Hooks 引用 DOM 元素

Question

我正在创建对 DOM 元素的引用，以便将 React Hooks 用于功能组件，如下所示:

        let link1, link2 = useRef();

        <ul>
            <li>
               <a ref={element => { link1 = element;}}>FAQ</a>
            </li>
            <li>
               <a ref={element => { link2 = element;}}>Contact Us</a>
            </li>
        </ul>

问题是，我是否必须像上面那样为我想要定位的每个 DOM 元素创建引用？我觉得代码会增长得很快。

这是 codepen获取完整代码。

Answer 1

您也可以为所有相关元素的父元素创建一个 ref，并从那里抓取节点。

如果您将架构更改为:

const ulRef = useRef(null);
<ul ref={ulRef}>
        <li>
           <a className="link">FAQ</a>
        </li>
        <li>
           <a className="link">Contact Us</a>
        </li>
    </ul>

您可以像这样爬取节点:

ulRef.current.children().children('a')

它应该返回所有链接的节点列表。 ^这是使用了一种 jQuery 语法，多年前它仍然停留在我的脑海中....

您可以使用此命令创建 li 节点的 HTMLCollection: ulRef.current.children ，然后迭代它们以获得您想要的值。

我在 codesandbox 上创建了一个简化示例.