Javascript 使用React钩子引用DOM元素

我正在创建对DOM元素的引用，以便对功能组件使用React挂钩，如下所示：

        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>

让link1，link2=useRef（）；


查看完整的代码。
您也可以为所有相关元素的父元素创建一个引用，并从中抓取节点

如果将架构更改为：

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

它将返回所有链接的节点列表。
^这是使用jQuery语法，多年前我一直在想这个语法

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

我在上创建了一个简化的示例。
为什么需要为每个组件创建一个引用？你的用例是什么？您打算如何使用它们？我同意Federkun的观点，通常您不需要在react中使用ref，为什么您需要为列表中的每个项目指定ref？我从这个问题中感觉到了一个真正的问题。抱歉@AaronRoss我已经包括了对我的代码笔的引用。@Federkun我正在尝试为每个元素设置动画。请参阅codepen链接的更新问题。当控制台记录
ulRef.current.children（）.children（'a'）
时，我收到一个“未捕获的类型错误”。当我记录
ulRef.current
时，我确实看到返回的ul。我在原始帖子中添加了codpen引用。我更新了我的答案，因为我提供了不正确的语法。
ulRef.current.children
选择
ul
的所有子项，它们都是
li
。是否可以使用当前参考选择所有
？我在想
ulRef.current.children.children
但是它返回undefined.Ya，你可以像Javascript中的任何其他节点一样引用
ulRef.current
并对其进行查询<代码>ulRef.current.querySelectorAll（'a'）

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