Question

这很好：

import React, { FunctionComponent } from "react";
const Counter: FunctionComponent = () => <div>hello from Counter</div>;
export default Counter;

这有编译错误：

import React, { FunctionComponent } from "react";
function Counter1(): FunctionComponent {
  return <div>hello from Counter1</div>;
}
export default Counter1;

错误提示：

类型'Element'不能分配给类型'FunctionComponent <{}>'。
类型'元素'不提供签名'（props：{ 孩子们？：ReactNode; }，上下文？：任何）：ReactElement ReactElement 组件）>）| （new（props：any）=>组件）>'。ts（2322）

如何使用“函数”语法编写具有FunctionComponent类型的功能组件？

Answer 1

在

const Counter: FunctionComponent = () => <div>hello from Counter</div>;

Counter的类型为FunctionComponent。那是期望的行为。但是在：

function Counter(): FunctionComponent {
  return <div>hello from Counter1</div>;
}

Counter的类型是函数，它返回一个FunctionComponent ，它不是您想要的，并且不符合该函数的定义。

如果您绝对要使用function，可以这样写：

const Counter: FunctionComponent = function() {
  return <div>hello from Counter1</div>;
}

Answer 2

您可以使用与该函数同名的接口。

interface Counter extends FunctionComponent {}
function Counter() {
  return <div>hello from Counter1</div>;
}

如何使用“函数”而不是“ const”将类型FunctionComponent添加到React函数组件中？

2 个答案: