时间戳

首页 > 解决方案 > 使用 React Hooks 引用 DOM 元素

javascript - 使用 React Hooks 引用 DOM 元素

问题描述

我正在创建对 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。

标签： javascriptreactjs

解决方案

您也可以为所有相关元素的父元素创建一个 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')

哪个应该返回所有链接的 nodeList 。 ^这是使用多年前仍留在我脑海中的 jQuery 语法......

您可以使用此命令创建 li 节点的 HTMLCollection: ulRef.current.children，然后遍历它们以获得所需的值。

我在代码沙箱上创建了一个简化示例。

推荐阅读