ducky_L

导航

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.currentnull。当 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

posted on 2023-04-21 15:03  ducky_L  阅读(13)  评论(0编辑  收藏  举报