react ref
一、使用 ref 操作 DOM
1、要访问由 React 管理的 DOM 节点,首先,引入 useRef
Hook:
import { useRef } from 'react';
2、然后,在你的组件中使用它声明一个 ref:
const myRef = useRef(null);
3、最后,将其作为 ref
属性传给 DOM 节点:
<div ref={myRef}>
总结:useRef
Hook 返回一个对象,该对象有一个名为 current
的属性。最初,myRef.current
是 null
。当 React 为这个 <div>
创建一个 DOM 节点时,React 会把对该节点的引用放入 myRef.current
。然后,你可以从 事件处理器 访问此 DOM 节点,并使用在其上定义的内置浏览器 API。
摘自自react中文网:https://zh-hans.react.dev/learn/manipulating-the-dom-with-refs
二、使用 ref 引用值
当你希望组件“记住”某些信息,但又不想让这些信息 触发新的渲染 时,就可以使用 ref
摘自:https://zh-hans.react.dev/learn/referencing-values-with-refs