react里面如何获取元素
获取 DOM 元素的常用方法
使用 useRef Hook
在函数组件中，可以通过 useRef Hook 创建引用，并将其绑定到目标元素的 ref 属性上。组件渲染后，ref.current 会指向对应的 DOM 节点。
import { useRef, useEffect } from 'react';
function MyComponent() {
const divRef = useRef(null);
useEffect(() => {
console.log(divRef.current); // 输出 div 元素
}, []);
return <div ref={divRef}>目标元素</div>;
}类组件中的 React.createRef
类组件中可以通过 React.createRef 创建引用，并同样通过 ref 属性绑定到元素。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.divRef = React.createRef();
}
componentDidMount() {
console.log(this.divRef.current); // 输出 div 元素
}
render() {
return <div ref={this.divRef}>目标元素</div>;
}
}回调 Refs
通过传递一个回调函数到 ref 属性，可以直接获取 DOM 节点的引用。回调会在组件挂载和卸载时触发。
function MyComponent() {
const handleRef = (node) => {
if (node) {
console.log(node); // 输出 div 元素
}
};
return <div ref={handleRef}>目标元素</div>;
}通过事件对象获取
在事件处理函数中，可以通过 event.target 或 event.currentTarget 直接访问触发事件的元素。
function handleClick(event) {
console.log(event.currentTarget); // 输出点击的元素
}
function MyComponent() {
return <button onClick={handleClick}>点击我</button>;
}注意事项
- 避免过度操作 DOM，React 推荐优先使用状态驱动 UI。
useRef返回的引用对象在组件生命周期内保持不变，但修改ref.current不会触发重新渲染。- 回调 Refs 适用于动态绑定或需要精细控制的场景，但需注意清理逻辑（如卸载时传入
null）。
