Question

在React中，似乎我可以声明一个功能组件，或者只是一个函数返回一个JSX元素。令我感到困惑的是，我不知道这两种方法之间的主要区别。只有一种方法可以做而另一种方法不能做的事吗？

import React from "react";

type ItemProps = {
    id: number
    name: string
}

const Item: React.FC<ItemProps> = ({ id, name }) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

const item = ({ id, name }: ItemProps) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

export const Container = () =>
    (
        <section>
            {item({ id: 1, name: "item-1" })}
            <Item id={1} name={"item-1"} />
        </section>
    )

Answer 1

React.FC提供类型检查支持

您还可以使用React.FunctionComponent（或简写的React.FC-它们相同）编写组件：

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

与“正常功能”版本有所不同：

React.FunctionComponent关于返回类型是显式的，而普通函数版本是隐式的（否则需要其他版本）注释）。
它为静态属性（如静态属性）提供类型检查和自动完成功能 displayName，propTypes和defaultProps。
- 请注意，将defaultProps用于
  存在一些已知问题 React.FunctionComponent。有关详细信息，请参见此问题。我们维持
  您还可以查找单独的defaultProps部分。
它提供了孩子的隐式定义

查看文档以获取更多信息

https://github.com/typescript-cheatsheets/react/blob/main/README.md#section-2-getting-started

Answer 2

这两种方法之间的差异已记录here.

提供类型检查和自动完成功能，

Answer 3

在React中，函数的返回是JSX.Element。甚至React.FC中的声明返回也必须是JSX.Element

如果您有隐式回报

const Component: React.FC = () => {}

如果您有明确的回报

const Component = (): JSX.Element => {}

（）=> React.FC和（）=> JSX.Element有什么区别

3 个答案: