react如何获取dom节点
获取 DOM 节点的常见方法
使用 ref 属性
在 React 中，推荐通过 ref 直接访问 DOM 节点。通过 useRef Hook（函数组件）或 createRef（类组件）创建引用，并将其绑定到目标元素的 ref 属性上。
import { useRef, useEffect } from 'react';
function Example() {
const divRef = useRef(null);
useEffect(() => {
console.log(divRef.current); // 输出 DOM 节点
}, []);
return <div ref={divRef}>目标元素</div>;
}类组件中的 createRef
类组件中通过 React.createRef() 初始化引用，并在渲染时绑定到元素。
class Example 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>;
}
}回调形式的 ref
早期 React 版本支持通过回调函数获取 DOM 节点，将函数传递给 ref 属性，函数参数即为节点实例。
function Example() {
const handleRef = (node) => {
if (node) {
console.log(node); // 输出 DOM 节点
}
};
return <div ref={handleRef}>目标元素</div>;
}通过 findDOMNode（不推荐）ReactDOM.findDOMNode 可根据组件实例获取其渲染的 DOM 节点，但此方法已不推荐使用，可能在未来版本移除。
import { findDOMNode } from 'react-dom';
class Example extends React.Component {
componentDidMount() {
const node = findDOMNode(this);
console.log(node); // 输出组件根 DOM 节点
}
render() {
return <div>目标元素</div>;
}
}注意事项
- 避免滥用 DOM 操作：React 提倡数据驱动视图，直接操作 DOM 应作为最后手段。
- 动态
ref绑定：若元素为动态列表项，需确保ref绑定逻辑与列表更新同步。 - 函数组件的
ref转发：若需对子组件暴露 DOM 节点，需使用forwardRef包裹组件。
