React Typescript中用function替代const声明组件的报错如何解决

错误原因 #

你对React.FC的类型标注位置使用错误。React.FC是函数组件本身的类型，不是组件函数的返回值类型。你之前用const声明组件时，是给存储组件的变量标注类型为React.FC，符合类型定义；但改写为命名函数时，你错误地将函数返回值标注为React.FC，而组件实际返回的是JSX元素，因此触发类型不匹配报错。

对应报错的中文释义：

类型“Element”不能赋值给类型“FC<{}>”。类型“ReactElement<any, any>”无法匹配签名“(props: { children?: ReactNode; }, context?: any): ReactElement<any, any> | null”。

解决方案 #

两种写法运行效果完全一致，可根据团队规范或个人习惯选择：

方案1：保留React.FC类型标注 #

如果需要沿用React.FC的特性（自带children可选类型声明，不需要手动在props中定义），可以通过给函数表达式标注类型的方式改写：

const MyComponent: React.FC = function() {
  return <div>My Component</div>;
}

方案2：不使用React.FC，直接标注函数参数和返回值 #

如果不想用React.FC，可以直接给组件函数的入参（props）标注类型，返回值标注为JSX.Element（也可以省略返回值标注，TS会自动推导）：

// 无props的场景
function MyComponent(): JSX.Element {
  return <div>My Component</div>;
}

// 有props的场景
interface MyComponentProps {
  title: string;
  // 如果组件要接收children参数，需要手动声明类型，使用React.FC时不需要这一步
  children?: React.ReactNode;
}

function MyComponent(props: MyComponentProps): JSX.Element {
  return <div>{props.title}: {props.children}</div>;
}

内容的提问来源于stack exchange，提问作者Gen Tan