reactjs 函数组件forwardRef语法

jq6vz3qz 于 9个月前发布在 React

关注(0)|答案(2)|浏览(91)

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

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

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

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

型
有没有办法使用forwardRef使用相同的语法作为第一个例子？

2条答案

否，这是将ref传递给子级的唯一方法，如official docs中所述

注意第二个ref参数只有在你使用React.forwardRef调用定义组件时才存在。常规的函数或类组件不会接收ref参数，并且ref在props中也不可用。Ref转发不仅限于DOM组件。你也可以将ref转发到类组件示例。*

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

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

字符串
你提供的例子实际上有一个很大的缺点：

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

型
在您的示例中，您使用了一个匿名函数，如果您试图查看组件名称，这将使代码难以调试。
相反，最好总是使用命名函数：

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

型
请注意，我对函数和常量变量使用了相同的名称。
这样你就不会不小心用错名字了。
我注意到您对组件使用了一个假名：myFunc。
组件名称应始终以小写字母MyFunc开头。