类型'FC<ComponentType>‘的参数不能分配给'ForwardRefRenderFunction<unknown，ComponentType>’类型的参数
类型'FC<ComponentType>‘的参数不能分配给'ForwardRefRenderFunction<unknown，ComponentType>’类型的参数
提问于 2022-01-24 08:58:54
我用的是反应打字本。我有两个组成部分，一个是孩子，另一个是父母。我正在将ref转发给我的子组件，在我的子组件中，我使用forwardRef绑定导出，但是在导出行上出现了一个错误，即：Argument of type 'FC<ComponentType>' is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, ComponentType>'
这是我的代码：
import { forwardRef } from 'react';
import './Label.css';
type LabelType = {
name: string
ref: any
}
const Label: React.FC<LabelType> = ({name, ref}) => {
return <label className='label' ref={ref}>
</label>;
};
export default forwardRef(Label);回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-24 12:16:15
文献资料解释了forwardRef的工作原理:您必须将ref定义为函数组件的第二个参数(而不是将其包含在道具中，这是第一个参数)。然后将函数组件作为第一个参数传递给forwardRef。
这里有一个链接到在当前版本的
forwardRef中声明forwardRef的函数签名的位置。您可以检查它，以了解如何在下面的示例中导出这些类型。
以下是实现上述指令以修复当前组件的两种方法：
向forwardRef提供适当的泛型类型参数(然后不需要直接注释函数组件)：
import {default as React, forwardRef} from 'react';
import './Label.css';
export type LabelProps = {
name: string;
};
export const Label = forwardRef<HTMLLabelElement, LabelProps>(({name}, ref) => {
return (<label className='label' ref={ref}>{name}</label>);
});
export default Label;或者，直接注释函数组件：
import {default as React, forwardRef} from 'react';
import './Label.css';
export type LabelProps = {
name: string;
};
const Label = forwardRef((
{name}: LabelProps,
ref: React.ForwardedRef<HTMLLabelElement>,
): React.ReactElement => {
return (<label className='label' ref={ref}>{name}</label>);
});
export default Label;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70831258
复制相关文章
相似问题
腾讯云开发者
