react如何获取元素
获取 DOM 元素的方法
在 React 中获取 DOM 元素通常使用 ref 机制。以下是几种常见方式：
使用 useRef Hook（函数组件）
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const myRef = useRef(null);
useEffect(() => {
console.log(myRef.current); // 获取到的 DOM 元素
myRef.current.focus(); // 示例：自动聚焦输入框
}, []);
return <input ref={myRef} />;
}使用 createRef（类组件）
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef.current); // 获取到的 DOM 元素
}
render() {
return <div ref={this.myRef}>内容</div>;
}
}回调形式的 ref（适用于所有组件）
function MyComponent() {
let myRef;
const setRef = (element) => {
myRef = element;
console.log(myRef); // 获取到的 DOM 元素
};
return <button ref={setRef}>按钮</button>;
}获取多个元素的方法
动态绑定 ref（列表场景）
function ListComponent() {
const itemsRef = useRef([]);
useEffect(() => {
console.log(itemsRef.current); // 所有元素的数组
}, []);
return (
<ul>
{[1, 2, 3].map((item, index) => (
<li
key={index}
ref={(el) => (itemsRef.current[index] = el)}
>
{item}
</li>
))}
</ul>
);
}注意事项
- 避免在渲染期间直接操作 ref，应在
useEffect或生命周期方法中访问 - 函数组件中使用
useRef会保持引用不变，而createRef会在每次渲染时新建引用 - 对于第三方库集成（如动画库），ref 通常是必要的交互方式
