react如何获取元素
获取DOM元素的常用方法
在React中获取DOM元素主要通过ref实现，以下是几种常见方式：
使用useRef Hook（函数组件）
import React, { useRef } from 'react';
function MyComponent() {
const myRef = useRef(null);
const handleClick = () => {
console.log(myRef.current); // 访问DOM节点
myRef.current.style.color = 'red';
};
return (
<div ref={myRef} onClick={handleClick}>
Click me
</div>
);
}使用createRef（类组件）
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
handleClick = () => {
console.log(this.myRef.current);
};
render() {
return <div ref={this.myRef} onClick={this.handleClick}>Click me</div>;
}
}回调形式的ref
function MyComponent() {
let myRef;
const setRef = (element) => {
myRef = element;
};
const handleClick = () => {
console.log(myRef);
};
return <div ref={setRef} onClick={handleClick}>Click me</div>;
}获取多个元素
function ListComponent() {
const itemsRef = useRef([]);
useEffect(() => {
console.log(itemsRef.current); // 数组包含所有li元素
}, []);
return (
<ul>
{[1, 2, 3].map((item, index) => (
<li
key={item}
ref={el => itemsRef.current[index] = el}
>
Item {item}
</li>
))}
</ul>
);
}注意事项
- 避免在渲染期间修改ref.current
- 函数组件中使用useRef，类组件中使用createRef
- ref在组件挂载后才会有值，卸载时会变为null
- 对于表单元素，通常应该使用受控组件而非ref直接操作
