如何使用 ref 操作 DOM？（一）使用 ref 访问 DOM 节点

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

翻译自：beta.reactjs.org/learn/manip…

因为 React 已经根据 render 的输出处理了 DOM 结构，所以你的组件不经常需要操作 DOM。然而，有的时候你可能需要操作 React 管理的 DOM 元素，比如，将焦点放到一个节点上，滚动到这个节点，或者去计算它的宽和高。React 中没有内置的方法去做这些事情，所以你将会需要 ref 去指向这个 DOM 节点。

这个系列的文章你将会学到：

• 如何使用 ref 属性访问由 React 管理的 DOM 节点
• 如何将 JSX 的 ref 属性关联到 useRef 钩子
• 如何访问其他组件的 DOM 节点
• 在哪种情况下，修改 React 管理的 DOM 是安全的

关于 ref 相关的介绍和例子，可以看我前面一个系列的文章 useRef 简单易懂解析

系列文章

如何使用 ref 操作 DOM？（一）使用 ref 访问 DOM 节点

获取节点的 ref

要访问 React 管理的 DOM 节点，首先，导入 useRef 钩子:

import { useRef } from 'react';

然后，使用它在组件中声明一个 ref:

const myRef = useRef(null);

最后，将它作为 ref 属性传递给 DOM 节点:

<div ref={myRef}>

useRef 这个 Hook返回一个对象，这个对象只有一个名为 current 的属性。myRef.current 的初始值是 null。当 React 为这个 <div> 创建一个 DOM 节点时，React 会将这个节点的引用放到 myRef.current 中。然后可以从事件处理程序访问这个 DOM 节点，并使用它上面定义的内置浏览器 api。

// 你可以使用浏览器 API, 比如:
myRef.current.scrollIntoView();
myRef.current.focus();

本文介绍了如何使用 ref 访问 DOM 节点，后面将介绍一些实际例子和最佳实践，欢迎点赞和评论～