react 如何获取dom
获取 DOM 的方法
在 React 中，可以通过 ref 来获取 DOM 节点。ref 提供了一种直接访问 DOM 元素或 React 组件实例的方式。
使用 useRef 钩子
useRef 是 React Hooks 中用于创建 ref 的方法。适用于函数组件。
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const myRef = useRef(null);
useEffect(() => {
console.log(myRef.current); // 输出 DOM 节点
}, []);
return <div ref={myRef}>Hello World</div>;
}使用 createRef
createRef 是类组件中常用的方法。
import React, { Component, createRef } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.myRef = createRef();
}
componentDidMount() {
console.log(this.myRef.current); // 输出 DOM 节点
}
render() {
return <div ref={this.myRef}>Hello World</div>;
}
}回调 Refs
回调 ref 是一种更灵活的方式，允许在 ref 附加或分离时执行自定义逻辑。
import React, { useEffect } from 'react';
function MyComponent() {
let myRef = null;
useEffect(() => {
console.log(myRef); // 输出 DOM 节点
}, []);
return <div ref={(node) => (myRef = node)}>Hello World</div>;
}在类组件中使用字符串 Refs（不推荐）
字符串 ref 是旧版 React 中的语法，现已不推荐使用，但在某些旧代码中可能仍然存在。
class MyComponent extends Component {
componentDidMount() {
console.log(this.refs.myRef); // 输出 DOM 节点
}
render() {
return <div ref="myRef">Hello World</div>;
}
}获取子组件的 DOM
如果需要获取子组件的 DOM 节点，可以通过 forwardRef 将 ref 转发到子组件。
import React, { forwardRef, useRef, useEffect } from 'react';
const ChildComponent = forwardRef((props, ref) => {
return <div ref={ref}>Child Component</div>;
});
function ParentComponent() {
const childRef = useRef(null);
useEffect(() => {
console.log(childRef.current); // 输出子组件的 DOM 节点
}, []);
return <ChildComponent ref={childRef} />;
}注意事项
ref不能用于函数组件，除非使用forwardRef。- 避免过度使用
ref，尽量优先使用 React 的状态和属性来控制组件行为。 - 在
useEffect或componentDidMount中访问ref.current，确保 DOM 已渲染完成。
