react 如何获取dom
获取 DOM 的方法
在 React 中，可以通过 useRef 或 createRef 来获取 DOM 节点。useRef 是函数组件中常用的方法，而 createRef 通常用于类组件。
使用 useRef 获取 DOM
在函数组件中，可以通过 useRef Hook 创建一个 ref，并将其附加到目标 DOM 元素上。
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const divRef = useRef(null);
useEffect(() => {
if (divRef.current) {
console.log('DOM element:', divRef.current);
}
}, []);
return <div ref={divRef}>This is a DOM element</div>;
}使用 createRef 获取 DOM
在类组件中，可以通过 createRef 方法创建 ref，并将其绑定到目标元素上。
import React, { createRef } from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.divRef = createRef();
}
componentDidMount() {
if (this.divRef.current) {
console.log('DOM element:', this.divRef.current);
}
}
render() {
return <div ref={this.divRef}>This is a DOM element</div>;
}
}回调 ref 的方式
除了 useRef 和 createRef，还可以通过回调函数的方式获取 DOM 节点。这种方式在 React 早期版本中较为常见。
import React, { useEffect } from 'react';
function MyComponent() {
let divRef = null;
useEffect(() => {
if (divRef) {
console.log('DOM element:', divRef);
}
}, []);
return <div ref={(el) => (divRef = el)}>This is a DOM element</div>;
}动态绑定多个 ref
如果需要动态绑定多个 DOM 节点，可以通过 useRef 结合回调函数或数组的方式实现。
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const refs = useRef([]);
useEffect(() => {
refs.current.forEach((ref) => {
if (ref) {
console.log('DOM element:', ref);
}
});
}, []);
return (
<div>
{[1, 2, 3].map((item, index) => (
<div
key={item}
ref={(el) => (refs.current[index] = el)}
>
Item {item}
</div>
))}
</div>
);
}注意事项
- 避免在渲染过程中直接操作 DOM，尽量通过 React 的状态和属性来控制界面。
useRef创建的 ref 对象在组件的整个生命周期内保持不变，不会因重新渲染而改变。- 回调 ref 的方式在每次渲染时会被调用两次（一次传入
null，一次传入 DOM 元素），但通常不会影响功能。
