react中如何拿到dom
使用 useRef Hook 获取 DOM 元素
在函数组件中，通过 useRef Hook 创建引用对象，并将其绑定到目标 DOM 元素的 ref 属性上。访问 ref.current 即可获取 DOM 实例。
import { useRef, useEffect } from 'react';
function MyComponent() {
const divRef = useRef(null);
useEffect(() => {
console.log(divRef.current); // 输出 DOM 元素
}, []);
return <div ref={divRef}>目标元素</div>;
}类组件中使用 createRef
在类组件中，通过 React.createRef() 创建引用对象，并在渲染时将 ref 属性分配给目标元素。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.divRef = React.createRef();
}
componentDidMount() {
console.log(this.divRef.current); // 输出 DOM 元素
}
render() {
return <div ref={this.divRef}>目标元素</div>;
}
}回调 Refs 动态绑定
通过回调函数的方式动态绑定 ref，适用于需要灵活控制引用的场景。回调函数会在组件挂载或卸载时执行。
function MyComponent() {
let divRef = null;
const setDivRef = (element) => {
divRef = element;
};
useEffect(() => {
console.log(divRef); // 输出 DOM 元素
}, []);
return <div ref={setDivRef}>目标元素</div>;
}通过 findDOMNode 获取（不推荐）
ReactDOM.findDOMNode 可以获取组件的底层 DOM 节点，但官方已标记为过时，建议优先使用 ref。
import { findDOMNode } from 'react-dom';
class MyComponent extends React.Component {
componentDidMount() {
const node = findDOMNode(this);
console.log(node); // 输出根 DOM 元素
}
render() {
return <div>目标元素</div>;
}
}转发 Refs 获取子组件 DOM
通过 React.forwardRef 将父组件的 ref 转发到子组件的特定 DOM 元素上。
const ChildComponent = React.forwardRef((props, ref) => {
return <div ref={ref}>子组件元素</div>;
});
function ParentComponent() {
const childRef = useRef(null);
useEffect(() => {
console.log(childRef.current); // 输出子组件的 DOM 元素
}, []);
return <ChildComponent ref={childRef} />;
}注意事项
- 避免在渲染期间直接操作 DOM，应在
useEffect或生命周期方法中处理。 - 函数组件的回调 Refs 可能因函数重新创建导致重复执行，建议用
useCallback优化。 - 转发 Refs 时需确保子组件正确接收并绑定
ref。
