React 中如何获取 DOM 节点？
满分答案#
在 React 中获取真实 DOM 节点，首选使用 useRef() 钩子：
- 创建 ref 对象 →
const ref = useRef(null) - 绑定到元素上 →
<div ref={ref} /> - 在 useEffect / 事件回调 中通过
ref.current获取真实 DOM - 函数组件获取子组件 DOM，需搭配
forwardRef
一、最标准、最常用方法：useRef#
1. 获取当前组件内的 DOM（最简单）#
import { useRef, useEffect } from 'react';
function App() {
// 1. 创建 ref
const domRef = useRef(null);
// 2. DOM 渲染完成后才能拿到（ useEffect ）
useEffect(() => {
// 真实 DOM 节点
console.log(domRef.current);
// 可以操作：聚焦、样式、获取宽高、滚动等
domRef.current.focus();
}, []);
// 3. 绑定到元素
return <input ref={domRef} />;
}二、获取子组件的 DOM 节点#
子组件必须用 forwardRef 把 ref 转发出去
import { useRef, forwardRef } from 'react';
// 子组件
const Child = forwardRef((props, ref) => {
return <div ref={ref}>子组件 DOM</div>;
});
// 父组件
function Parent() {
const childDomRef = useRef(null);
useEffect(() => {
console.log(childDomRef.current); // 拿到子组件的 div DOM
}, []);
return <Child ref={childDomRef} />;
}三、获取 DOM 的时机（非常重要）#
- 渲染完成后获取 → useEffect（最安全）
- 事件触发时获取 → 点击/输入等事件里
- useLayoutEffect → DOM 更新后、浏览器绘制前（获取布局）
千万不要在组件渲染期间直接拿，会是 null！
四、类组件写法（了解即可）#
class App extends React.Component {
componentDidMount() {
console.log(this.domRef);
}
render() {
return <div ref={(el) => (this.domRef = el)} />;
}
}五、总结#
- 获取 DOM 统一用 useRef
- 绑定：ref={domRef}
- 获取：domRef.current
- 必须在 useEffect 或事件里拿
一句话记忆#
创建 ref → 绑定元素 → useEffect 里拿 current