使用 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 元素创建引用？ 我觉得代码会增长得很快。

这是完整代码的代码笔。

Answer 1

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

如果您将架构更改为：

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 节点的ulRef.current.children ： ulRef.current.children ，然后遍历它们以获得您想要的值。

我在codeandbox上创建了一个简化示例。