react如何获取节点
获取 DOM 节点的常用方法
在 React 中获取 DOM 节点可以通过 ref 实现。ref 提供了一种直接访问 DOM 元素或组件实例的方式。
类组件中使用 createRef
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef.current); // 获取 DOM 节点
}
render() {
return <div ref={this.myRef}>Hello World</div>;
}
}函数组件中使用 useRef
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>;
}回调 Refs 方式
对于更精细的控制，可以使用回调形式的 ref，在组件挂载或卸载时执行特定操作。
class MyComponent extends React.Component {
setRef = (element) => {
console.log(element); // DOM 节点
};
render() {
return <div ref={this.setRef}>Callback Ref</div>;
}
}获取子组件的 DOM 节点
通过 forwardRef 可以将 ref 传递给子组件，从而访问子组件的 DOM 节点。
const ChildComponent = React.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} />;
}动态绑定多个 Refs
对于动态生成的元素列表，可以通过函数或对象存储多个 ref。
function DynamicRefs() {
const items = ['Item 1', 'Item 2', 'Item 3'];
const refs = useRef({});
useEffect(() => {
console.log(refs.current); // 所有 DOM 节点的集合
}, []);
return (
<ul>
{items.map((item) => (
<li
key={item}
ref={(el) => (refs.current[item] = el)}
>
{item}
</li>
))}
</ul>
);
}注意事项
ref不能在函数组件上直接使用，除非使用forwardRef转发。- 避免过度使用
ref，优先考虑 React 的状态和 props 管理。 - 在
componentDidMount或useEffect中访问ref.current，确保组件已挂载。
