react 中的 refs 和 dom：访问和操作 dom 元素
在 react 中，refs 用于直接访问 dom 元素 并与之交互。虽然 react 通常通过状态和 props 以声明式方式管理 dom，但有时您可能需要直接与 dom 交互，例如动画、表单字段焦点或测量元素尺寸。在这些情况下，refs 提供了一种访问底层 dom 节点的方法。
1. react 中的 refs 是什么？
a ref （reference 的缩写）是一个允许你引用 dom 元素或 react 组件实例的对象。可以在类组件中使用 react.createref() 或在函数组件中使用 useref() 创建 ref。参考文献通常用于：
直接访问 dom（例如，聚焦输入字段或获取表单元素的值）。 触发命令式动画或动作。 与需要直接 dom 操作的第三方库集成。2.创建和使用参考
类组件：
在类组件中，引用是使用 react.createref() 创建的。然后，创建的 ref 通过 ref 属性附加到 dom 元素。
类组件中的引用示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import react, { component } from react;
class mycomponent extends component {
constructor(props) {
super(props);
// create a ref to access the input element
this.inputref = react.createref();
}
handlefocus = () => {
// access the dom node directly and focus the input element
this.inputref.current.focus();
};
render() {
return (
<div>
<input ref={this.inputref} type="text" />
<button onclick={this.handlefocus}>focus input</button>
</div>
);
}
}
export default mycomponent;
在此示例中：
this.inputref 是使用 react.createref() 创建的。 ref 通过 ref 属性分配给 元素。 在handlefocus方法中，我们通过this.inputref.current访问输入元素并调用focus()以编程方式聚焦输入字段。在函数组件中：
在函数组件中，引用是使用 useref 钩子创建的。 useref 钩子允许您创建一个在重新渲染期间持续存在的可变引用对象。
函数组件中的引用示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import react, { useref } from react;
const mycomponent = () => {
const inputref = useref();
const handlefocus = () => {
// access the dom node directly and focus the input element
inputref.current.focus();
};
return (
<div>
<input ref={inputref} type="text" />
<button onclick={handlefocus}>focus input</button>
</div>
);
};
export default mycomponent;
在此示例中：
inputref 是使用 useref 钩子创建的。 使用 ref 属性将 ref 附加到 元素。 handlefocus 函数使用 inputref.current 访问输入元素，并调用 focus() 来聚焦输入字段。3.参考用例
a.访问 dom 元素
refs 通常用于直接访问和操作 dom 元素。例如，可以使用 refs 轻松完成关注文本输入或测量元素的大小。
b.管理焦点
refs 允许您管理元素的焦点，例如在组件安装时或在执行特定操作后聚焦于输入字段。
使用参考文献管理焦点的示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import react, { useeffect, useref } from react;
const focusinput = () => {
const inputref = useref();
useeffect(() => {
// focus the input when the component mounts
inputref.current.focus();
}, []);
return <input ref={inputref} type="text" />;
};
export default focusinput;
在此示例中，由于 useeffect 挂钩和 ref，当组件安装时，输入会自动聚焦。
c.触发动画或与第三方库集成
refs 通常用于与第三方库交互或触发命令式动画。例如，您可以使用 ref 来控制自定义动画或与 jquery 等非 react 库交互。
d.表单验证
refs 还可以用于收集表单数据，而无需将数据存储在 react 的状态中，为不需要实时更新的表单提供了一个简单的替代方案。
4.管理多个元素的引用
使用多个元素时，您可以将引用存储在对象或数组中以访问每个元素。
多个元素的引用示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { useRef } from react;
const MultipleRefs = () => {
const inputRefs = [useRef(), useRef(), useRef()];
const focusInput = (index) => {
inputRefs[index].current.focus();
};
return (
<div>
<input ref={inputRefs[0]} type="text" />
<input ref={inputRefs[1]} type="text" />
<input ref={inputRefs[2]} type="text" />
<button onClick={() => focusInput(1)}>Focus Second Input</button>
</div>
);
};
export default MultipleRefs;
5. refs 与 state
refs 提供了一种与 dom 交互的方式，而 react 中的 state 用于管理影响 ui 渲染的数据。了解何时使用它们非常重要：
状态用于动态渲染：当数据发生变化并影响ui的渲染方式时，使用状态。 refs 用于命令式操作：当您需要直接与 dom 元素交互（例如，聚焦、测量或触发动画）时，请使用 refs。6.结论
react 中的 refs 是直接访问和操作 dom 元素的强大功能。它们提供了与 ui 交互的命令式方式，支持聚焦输入字段、触发动画或与第三方库集成等操作。
虽然 react 鼓励使用状态和 props 的声明式方法，但当您需要与 dom 进行更直接的交互时，refs 是一个重要的工具。
以上就是理解 React 中的 Refs 和 DOM：访问和操作 DOM 元素的详细内容，更多请关注php中文网其它相关文章！