react如何获取节点
获取 DOM 节点的常见方法
在 React 中，可以通过 ref 获取 DOM 节点。以下是几种常用的方式：
使用 useRef Hook（函数组件）
import { useRef } from 'react';
function MyComponent() {
const divRef = useRef(null);
useEffect(() => {
console.log(divRef.current); // 获取 DOM 节点
}, []);
return <div ref={divRef}>Example</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}>Example</div>;
}
}回调形式的 ref
通过回调函数可以更灵活地处理 ref：
function MyComponent() {
const handleRef = (node) => {
if (node) {
console.log(node); // 直接获取 DOM 节点
}
};
return <div ref={handleRef}>Example</div>;
}动态绑定多个 ref
如果需要批量获取子组件的 DOM 节点：
function List() {
const itemsRef = useRef({});
useEffect(() => {
Object.values(itemsRef.current).forEach(console.log);
}, []);
return (
<ul>
{[1, 2, 3].map((item) => (
<li
key={item}
ref={(node) => (itemsRef.current[item] = node)}
>
Item {item}
</li>
))}
</ul>
);
}转发 ref 到子组件
通过 forwardRef 获取子组件的 DOM 节点：
const Child = forwardRef((props, ref) => {
return <div ref={ref}>Child Component</div>;
});
function Parent() {
const childRef = useRef(null);
useEffect(() => {
console.log(childRef.current); // 子组件的 DOM 节点
}, []);
return <Child ref={childRef} />;
}注意事项
- 避免在渲染期间直接修改
ref.current，这可能导致意外行为。 - 函数组件的实例无法通过
ref获取，需配合useImperativeHandle暴露特定方法。 - 服务端渲染（SSR）环境下，
ref可能在初始渲染时为null。
