react里如何通过ref获取dom
通过 ref 获取 DOM 元素
在 React 中，可以通过 useRef Hook 或 createRef 方法获取 DOM 元素的引用。以下是具体实现方式：
使用 useRef Hook（函数组件）
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const divRef = useRef(null);
useEffect(() => {
console.log(divRef.current); // 获取 DOM 元素
divRef.current.style.color = 'red'; // 操作 DOM
}, []);
return <div ref={divRef}>This is a DOM element</div>;
}使用 createRef（类组件）
import React, { Component, createRef } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.divRef = createRef();
}
componentDidMount() {
console.log(this.divRef.current); // 获取 DOM 元素
this.divRef.current.style.color = 'blue'; // 操作 DOM
}
render() {
return <div ref={this.divRef}>This is a DOM element</div>;
}
}回调 ref 的用法
React 也支持通过回调函数的方式获取 ref：
function MyComponent() {
let divRef = null;
return (
<div ref={(el) => { divRef = el; }}>
{console.log(divRef)} // 在渲染后打印 DOM 元素
</div>
);
}转发 ref 到子组件
如果需要获取子组件的 DOM 节点，可以使用 forwardRef：
const ChildComponent = React.forwardRef((props, ref) => (
<div ref={ref}>{props.children}</div>
));
function ParentComponent() {
const childRef = useRef(null);
useEffect(() => {
console.log(childRef.current); // 子组件的 DOM 元素
}, []);
return <ChildComponent ref={childRef}>Child Content</ChildComponent>;
}注意事项
- Ref 的
current属性在组件挂载后才会被赋值，初始值为null。 - 避免过度使用 ref 直接操作 DOM，优先考虑 React 的状态驱动方式。
- 函数组件每次渲染都会重新执行，因此回调 ref 可能会被调用两次（清空旧 ref 和设置新 ref）。
