如何在Typescript中正确使用forwardRef ?

Question

我是React的新手，请原谅我

我有一个组件

const Avatar = forwardRef((props, ref) => {
const {
color,
className,
size,
tag: Tag,
...rest
} = props
return (
<Tag
className={classnames('avatar', {
[className]: className,
[`bg-${color}`]: color,
[`avatar-${size}`]: size
})}
ref={ref}
{...rest}
>
... //rest of codes
</Tag>
)
})
export default Avatar

现在，我可以在javascript

中这样做

<Avatar size="sm" color="success" />

然而，在Typescript中，我将得到错误信息

Property 'size' does not exist on type 'IntrinsicAttributes & RefAttributes<any>'  

知道哪里出错了吗?我假设我需要传递ref所以我输入

const ref = React.createRef<Tag>();
<Avatar ref={ref} size="sm" color="success" />  

但我仍然有同样的问题，我如何通过size和color作为道具?我试着在互联网上寻找答案，但我似乎找不到解决方案，任何帮助都会很感激。

Answer 1

在导出中添加forwardRef解决TSLint错误

const Avatar = (props, ref) => {
const {
color,
className,
size,
tag: Tag,
...rest
} = props
return (
<Tag
className={classnames('avatar', {
[className]: className,
[`bg-${color}`]: color,
[`avatar-${size}`]: size
})}
ref={ref}
{...rest}
>
... //rest of codes
</Tag>
)
}
export default forwardRef(Avatar)

Answer 2

我不确定你是否真的需要转发ref。我希望我的回答能给您提供一些解决用例的方法。我可以看到你传递Tag作为一个道具，你使用它作为JSX标签，这是无效的。

对我来说这段JSX代码是无效的

<Tag
className={classnames('avatar', {
[className]: className,
[`bg-${color}`]: color,
[`avatar-${size}`]: size
})}
ref={ref}
{...rest}
>
... //rest of codes
</Tag>

因为你传递Tag作为道具，你不能使用它作为JSX标签。您可以将JSX标记作为道具传递，但实现不是这样的。你应该导入那个标签，或者如果你真的想把它作为prop传递。你需要把它组合在它的父组件上。

这样的

const ParentComponent: React.FC = () => (
<Avatar
// You have to compose it here
tag={
<Tag
// className={classnames('avatar', {
//   [className]: className,
//   [`bg-${color}`]: color,
//   [`avatar-${size}`]: size
// })}
// ref={ref}
// {...rest}
>
... //rest of codes
</Tag>
}
/>
);
export default ParentComponent;

你也可以在codesandbox中交互演示，这样你就可以更多地了解我想说的。点击这里