react中ref如何
React 中 ref 的使用方法
在 React 中，ref 用于直接访问 DOM 元素或 React 组件实例。以下是几种常见的 ref 使用方法：
使用 createRef（React 16.3+）
createRef 是 React 16.3 引入的 API，适用于类组件和函数组件。
import React, { createRef } from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = createRef();
}
componentDidMount() {
console.log(this.myRef.current); // 访问 DOM 元素
}
render() {
return <div ref={this.myRef}>Hello, World!</div>;
}
}使用 useRef（函数组件）
useRef 是 React Hooks 的一部分，适用于函数组件。
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>;
}回调 ref
回调 ref 是一种更灵活的方式，可以在 ref 被设置或解除时执行自定义逻辑。
class MyComponent extends React.Component {
setRef = (element) => {
this.myRef = element;
};
componentDidMount() {
console.log(this.myRef); // 访问 DOM 元素
}
render() {
return <div ref={this.setRef}>Hello, World!</div>;
}
}转发 ref（Forwarding Refs）
forwardRef 用于将 ref 传递给子组件，通常用于高阶组件或封装库。
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="fancy-button">
{props.children}
</button>
));
function App() {
const buttonRef = useRef(null);
useEffect(() => {
console.log(buttonRef.current); // 访问按钮 DOM 元素
}, []);
return <FancyButton ref={buttonRef}>Click me!</FancyButton>;
}注意事项
ref不能用于函数组件，除非使用forwardRef。- 避免过度使用
ref，优先考虑 React 的数据流和状态管理。 ref的更新不会触发组件的重新渲染。
通过以上方法，可以灵活地在 React 中使用 ref 来操作 DOM 或组件实例。
