React useImperativeHandle Hook 90% 前端都不知道转发多个 Refs

我报名了Goldstone Project Phase 1 Challenge——瓜分100,000奖池，这是我的第13篇文章， 点击查看活动详情

为什么ref不属于props，而是需要forwardRef呢？

当我们有一个非常简单的表单组件时，伪代码如下：

常量形式 = () => {
返回<表格>
<标签为=“名称”></ label >
< 输入类型 = “文本” id = “名称” ></ input >
<按钮> 提交</ button >
</ form >
}
复制代码

我想直接从外面获取按钮的DOM引用，怎么办？

理想情况下，我们传递一个 ref 属性。

常量页 = () => {
常量 buttonRef = useRef()
返回 < 表单引用 = {buttonRef} />
}
复制代码

然后在Form组件中接收并绑定。

常量形式 = ( { ref }) => {
返回<表格>
<标签为=“名称”></ label >
< 输入类型 = “文本” id = “名称” ></ input >
提交</ button >
</ form >
}
复制代码

但不幸的是，React 并没有这样做。

相应地，React 发明了 forwardRef，这使得代码难以阅读。

const Form = forwardRef( ( props, ref ) => {
返回<表格>
<标签为=“名称”></ label >
< 输入类型 = “文本” id = “名称” ></ input >

提交</ button >
</ form >
})
复制代码

为什么要用这种方式？因为 ref 不仅仅是一个 DOM 节点引用，它的作用是“一个不会被重新渲染的状态”。

为什么 ref 不是 refs？

接下来，我的需求发生了变化，我需要获取输入的DOM引用，我该怎么做呢？

最简单的方法是将 ref 绑定到表单元素，然后使用表单元素的 DOM API 来获取子元素。

但这似乎很不React。

当然有一种方法可以传递 ref 一个对象。

像这样：

常量页 = () => {
常量 buttonRef = useRef()
常量 inputRef = useRef()
return < Form ref = {{ buttonRef , inputRef }} />
}
复制代码

那么子组件的代码是这样写的：

const Form = forwardRef( ( props, ref ) => {
返回<表格>
<标签为=“名称”></ label >
< 输入参考 = {ref.inputRef} 类型 = “文本” id = “名称” ></ input >

提交</ button >
</ form >
})
复制代码

但这又不适用于 TypeScript。

为什么？因为 ref 的类型应该是回调或者具有当前属性的对象。

不过其实只要把ref改成refs就行了，没有那么麻烦。

React 开发团队对此没有任何解释，我认为这是一个设计错误。

什么是 useImperativeHandle Hooks？

我相信大多数 React 工程师都没有接触过这个 API。

它是干什么用的？在进行命令式编程时似乎使用字面意思。 React 官方的说法是当需要暴露给父组件的 DOM 实例时才需要用到，一般用 forwardRef。

如何使用这个 Hooks？很简单。

父组件没有改变，仍然传递一个 ref。

常量页 = () => {
常量 ref = useRef()
返回 < 表单 ref = {ref} />
}
复制代码

子组件即将发生一些变化。

常量形式 = ( { ref }) => {
常量 labelRef = useRef();
常量 inputRef = useRef();
常量 buttonRef = useRef();
useImperativeHandle(ref, () => ({
获取标签（）{
返回标签参考。当前的;
},
获取输入（）{
返回输入参考。当前的;
},
获取按钮（）{
返回按钮参考。当前的;
},
}))
返回<表格>
< 标签参考 = {labelRef} for = "名称" ></ label >
< 输入参考 = {inputRef} 类型 = “文本” id = “名称” ></ input >

提交</ button >
</ form >
}
复制代码

在父组件中访问子组件的 DOM 实例时：

参考。当前的。输入
参考。当前的。按钮
复制代码

总结

如您所见，React 在设计上并不理想。它也有很多难以理解的东西。

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接： https://homecpp.art/2923/10473/2041

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39048/39562411