FC＜PropsWithChildren＜Props＞＞：React 函数组件的类型定义-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51687565/article/details/143086790

在使用 TypeScript 编写 React 应用时，类型安全和开发体验非常重要。本文将介绍 FC<PropsWithChildren<Props>> 的用法，它是一种定义函数组件类型的方式，并讨论其优点以及与其他类似写法的对比。

1. `FC<PropsWithChildren<Props>>` 的定义

在 React 中，FC（Function Component）是一个类型别名，用于定义函数组件的类型。PropsWithChildren 则是一个泛型接口，扩展了组件的 props 类型，并自动包含一个 children 属性。

FC（Function Component）：表示一个函数组件的类型，接收 props 并返回 ReactElement。
PropsWithChildren<Props>：用于扩展组件的 props 类型，自动添加一个可选的 children 属性。

结合起来，FC<PropsWithChildren<Props>> 定义了一个既可以接收 props 也可以接收子组件的函数组件。

2. 示例代码

下面是一个简单的示例，演示如何使用 FC<PropsWithChildren<Props>> 定义一个组件

import React, { FC, PropsWithChildren } from 'react';

interface MyComponentProps {
title: string;
}

const MyComponent: FC<PropsWithChildren<MyComponentProps>> = ({ title, children }) => {
return (
<div>
<h1>{title}</h1>
<div>{children}</div>
</div>
);
};

export default MyComponent;

在这个例子中，MyComponent 是一个接收 title 和 children 属性的函数组件。使用 FC<PropsWithChildren<MyComponentProps>> 定义类型，使 children 属性得到了自动支持。

3. `FC<PropsWithChildren<Props>>` 的优点

使用 FC<PropsWithChildren<Props>> 有以下几个优点：

类型安全：在编译阶段检测到类型错误，确保组件使用的 props 和 children 符合预期。
自动推断 children：默认支持 children，无需手动为 props 添加。
开发体验良好：自动提示、属性补全和类型检查，使开发过程更高效。
内置的返回类型：FC 已定义返回类型为 ReactElement，不需要额外显式声明返回类型。

4. 与其他写法的对比

下面将对比几种常见的函数组件类型定义方式，看看 FC<PropsWithChildren<Props>> 有哪些不同。

4.1 `FC<PropsWithChildren<Props>>` vs. `FC<Props>`

FC<Props> 和 FC<PropsWithChildren<Props>> 的主要区别在于 children 的支持：

FC<Props>：不自动包含 children，需要手动添加 children 属性。
FC<PropsWithChildren<Props>>：自动支持 children，更适合大多数需要嵌套子组件的场景。

4.2 `FC<PropsWithChildren<Props>>` vs. 普通函数组件写法

另一种常见的做法是直接定义函数组件，不使用 FC：

const MyComponent: (props: MyComponentProps & { children?: React.ReactNode }) => JSX.Element = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <div>{children}</div>
    </div>
  );
};

对比之下，FC<PropsWithChildren<Props>> 更简洁，且 FC 自动处理了返回类型和 children 的定义，让代码更加清晰。