脱围机制-react18废除forwardRef-＞react19直接使用ref的理解
采用ref，可以在父组件调用到子组件的功能
第一步：在父组件声明ref并传递ref
interface SideOptsHandle {
refreshData: () => Promise<void>
}
const sideOptsRef = useRef<SideOptsHandle>(null) // 创建 ref
<SideOpts ref={sideOptsRef} />第二步：在子组件接收ref，并通过useImperativeHandle进行脱围
interface SideOptsHandle {
refreshData: () => Promise<void>
}
interface SideOptsProps {
ref?: React.Ref<SideOptsHandle>
// 其他 props 可在这里定义
}
const SideOpts = ({ ref }: SideOptsProps) => {
useImperativeHandle(ref, () => ({
refreshData: async () => {
await fetchData()
},第三步：父组件使用ref进行使用子组件脱围的对象
if (sideOptsRef.current) {
await sideOptsRef.current.refreshData() // 调用 SideOpts 的刷新方法
console.log('刷新成功')
}