函数组件forwardRef语法

Question

我所有的代码都是用这样的组件编写的。

export default myFunc(props){
return <input placeholder={props.placeholder} />;
}

出于一致性的原因，我想在使用forwardRef的同时，继续对其他组件使用这种语法，但我只能找到这样的例子；

export const myFunc = forwardRef((props, ref) => {
<input ref={ref} placeholder={props.placeholder} />
});

有没有任何方法可以使用与第一个例子相同的语法来使用forwardRef？

Answer 1

不，这是将ref传递给子级的唯一方法，如官方文档中所述

注意第二个ref参数仅在使用React.forwardRef调用定义组件时存在。正则函数或类组件不接收ref参数，并且ref在props中也不可用。引用转发不限于DOM组件。你可以转发裁判也可以对组件实例进行分类

Answer 2

是的，这是可能的，事实上我建议使用以下语法：

export default forwardRef(MyFunc(props, ref)
{
return <input placeholder={props.placeholder} />;
})

---

您提供的示例实际上有很大的缺点。

export const MyFunc = forwardRef((props, ref) =>
{
<input ref={ref} placeholder={props.placeholder} />
});

在您的示例中，您使用了一个匿名函数，如果您试图查看组件名称，这将使代码难以调试。

相反，最好始终使用命名函数：

export const MyFunc = forwardRef(function MyFunc(props, ref)
{
<input ref={ref} placeholder={props.placeholder} />
});

请注意，我为函数和const变量使用了相同的名称
这样就不会意外使用错误的名称。

---

我注意到您的组件使用了小写名称：myFunc
组件名称应始终以大写字母MyFunc开头。