react refs 如何使用
React Refs 的基本概念
Refs 提供了一种直接访问 DOM 节点或 React 组件实例的方式。通常在需要直接操作 DOM 或调用组件方法时使用。
创建 Refs
使用 React.createRef() 在类组件中创建 ref，或通过 useRef Hook 在函数组件中创建 ref。
类组件示例：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}函数组件示例：
function MyComponent() {
const myRef = React.useRef(null);
return <div ref={myRef} />;
}访问 Refs
通过 ref 的 current 属性访问 DOM 节点或组件实例。
// 类组件中
componentDidMount() {
console.log(this.myRef.current); // 获取 DOM 节点
}
// 函数组件中
React.useEffect(() => {
console.log(myRef.current); // 获取 DOM 节点
}, []);回调 Refs
另一种方式是使用回调函数形式的 ref，适用于动态设置 ref 的场景。
function MyComponent() {
const setRef = (node) => {
if (node) {
console.log(node); // 直接获取 DOM 节点
}
};
return <div ref={setRef} />;
}转发 Refs（Forwarding Refs）
通过 React.forwardRef 将 ref 传递给子组件，适用于高阶组件或封装库的场景。
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="fancy">
{props.children}
</button>
));
function App() {
const buttonRef = React.useRef(null);
return <FancyButton ref={buttonRef}>Click Me</FancyButton>;
}注意事项
- 避免过度使用 refs，优先使用 React 的状态和属性机制。
- 函数组件没有实例，因此
ref不能直接指向函数组件（除非使用forwardRef）。 - 在
useEffect或componentDidMount中访问 ref，确保 DOM 已渲染完成。
