react如何获取真实dom
获取真实 DOM 的方法
在 React 中，可以通过 ref 来访问真实的 DOM 节点。以下是几种常见的方式：
使用 useRef Hook（函数组件）
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const divRef = useRef(null);
useEffect(() => {
console.log(divRef.current); // 访问真实 DOM
}, []);
return <div ref={divRef}>Hello World</div>;
}使用回调形式的 ref（函数组件）
function MyComponent() {
let divRef = null;
const setRef = (element) => {
divRef = element;
console.log(divRef); // 访问真实 DOM
};
return <div ref={setRef}>Hello World</div>;
}使用 createRef（类组件）
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}>Hello World</div>;
}
}使用字符串形式的 ref（不推荐）
class MyComponent extends React.Component {
componentDidMount() {
console.log(this.refs.myDiv); // 访问真实 DOM
}
render() {
return <div ref="myDiv">Hello World</div>;
}
}注意事项
- 字符串形式的
ref已过时，不建议在新代码中使用。 - 在函数组件中，
useRef是最常用的方式。 ref不仅可以用于 DOM 元素，还可以用于类组件实例。- 不要在渲染期间访问
ref.current，因为此时可能尚未设置。
