( )=>React.FC 和 ( )=>JSX.Element 有什么区别？

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>
    )

- Silkey Van

Answer 1

总结区别：

React.FC:

• 有隐含的children属性，这意味着即使您的组件不允许子元素，如果使用了React.FC并且父元素传递了子元素，TypeScript也不会报错。虽然这在运行时没有影响，但最好更明确地说明子元素属性。这可能在下一个版本的React.FC中被取消，现在可以使用React.VFC
• 与 defaultProps 不兼容
• 不允许泛型
• 仅适用于函数表达式，不能用于函数声明
• 使“组件作为命名空间”的模式难以处理类型

JSX.element + props接口

• 没有隐含的children属性，因此需要显式声明，这很好，有些人更喜欢隐式返回类型。它不支持其他/静态属性的默认支持，如propTypes、displayName等，如果需要，则需要显式添加。
• 不关心defaultProps，只是普通的函数类型定义参数和返回类型
• 可与泛型一起使用
• 既可以用于函数声明，也可以用于表达式

资源

• https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/
• https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/
• https://github.com/facebook/create-react-app/pull/8177

- gaurav5430

---

截至今天，FC类型没有隐式子属性，因为在React类型的v18中，props不再被定义为propsWithChildren。 - HenriDev

Answer 2

React.FC 提供类型检查支持。

你也可以使用 React.FunctionComponent（或缩写方式 React.FC）编写组件，两者是相同的：

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

React.FunctionComponent与"普通函数"版本的一些区别:

• React.FunctionComponent明确了返回类型，而普通函数版本是隐式的（否则需要额外的注释）。
• 它提供了静态属性（例如displayName、propTypes和defaultProps）的类型检查和自动完成。
  • 请注意，使用defaultProps时存在某些已知问题，需参见此issue以获取详细信息。我们会维护一个单独的defaultProps部分以供查阅。
• 它提供了children的隐式定义

有关更多信息，请查看文档

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

- Hanzla Habib

Answer 3

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

如果您有隐式返回：

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

如果您有明确的返回值

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

- Felipe Domingues

---

你可以看出我还很早，你让我去谷歌搜索“chipden” :facepalm: - Laszlo

Answer 4

这两种方法之间的区别在此处有记录。

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

- Dinesh

---

这几乎是我正在寻找的答案。不幸的是，链接似乎已经更改，所以你提到的那个部分并没有那么有帮助。此外，你的回答没有指明哪个选项提供类型检查和自动完成。这让我和一开始一样困惑。 - Brady Dowling

Dinesh，你可能需要将链接中更重要的部分内联到这个答案中。 - KyleMit