const Vs 函数在 React Typescript 中创建组件答案

【问题标题】：const Vs function to create component in React Typescriptconst Vs 函数在 React Typescript 中创建组件
【发布时间】：2022-01-05 15:47:00
【问题描述】：

如何使用function 而不是const 来制作这个组件？

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

我试过这样做

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

但是，我的编辑器突出显示了 return 语句并给出了这个错误：

类型“元素”不可分配给类型“FC”。类型 'ReactElement' 不匹配签名 '(props: { children?: ReactNode; }, context?: any): ReactElement | null'.ts

【问题讨论】：

那个函数没有返回一个函数组件，它是一个。

标签： reactjs typescript

【解决方案1】：

首先，我建议了解 JS 中各种声明函数的方式之间的差异。即您可以将函数声明为function declarations 或function expressions。

例子：

function myFunction(){
    return 'This is a function declaration.'; 
}

const fun1 = function() {
    return 'This is a function expression using a normal function.';
}

const fun = () => {
    return 'This is a function expression with an arrow function.';
}

现在，回答您的问题，您不能在函数声明中使用 React.FC，因为在函数声明中执行以下操作时：

function fun() : React.FC {
//do something
}

Typescript 以您尝试指定 fun() 函数的返回类型的方式解释它。相反，您想要做的是：

function HomeComponent(): React.ReactNode {
  return <h1>Hello, world!</h1>
}

这样 TS 就知道这个函数会返回某种类型的 ReactNode。

当您拥有带有函数声明的道具时，您将这样做：

type Props = {
  message: string;
}

function HomeComponent({ message }): React.ReactNode {
  return <div>{message}</div>
}

【讨论】：

【解决方案2】：

您的编辑器正在突出显示它，因为您返回的不是 React 函数组件，而是一个 ReactNode。

这应该会有所帮助：

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

【讨论】：

【解决方案3】：

实际上，在第一个中，您返回一个 Function 组件，因为您看到下面的代码分配给了一个 const 值，因此您应该使用 (React.fn) ：

(a const value)  =    ()=>{}

但在第二个中，您创建了一个返回 Element 的函数，因此您应该使用 (React.ReactElement)。

【讨论】：