React函数式组件Props类型定义：用FC<>还是直接参数类型？

示例代码 #

示例 #1（使用FC<>） #

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

type AccordionProps = {
  title: string;
  children: ReactNode;
};

const Accordion: FC<AccordionProps> = ({ children, title }) => {
  return (
    <>
      <h3>{title}</h3>
      <div>{children}</div>
    </>
  );
};

export default Accordion;

示例 #2（直接指定参数类型） #

import React, { ReactNode } from 'react';

type AccordionProps = {
  title: string;
  children: ReactNode;
};

const Accordion = ({ children, title }: AccordionProps) => {
  return (
    <>
      <h3>{title}</h3>
      <div>{children}</div>
    </>
  );
};

export default Accordion;

我有个疑问已经存在一段时间了：这两种写法都能正常运行，但在React函数式组件中定义Props类型，哪种才是符合规范或约定的正确方式？

两种写法都合法，核心区别和社区偏好如下：

• FC<>的特性

  • React 17及以前的版本会自动给组件加上默认的children: ReactNode类型，React 18后该默认行为已移除，需手动声明children。
  • 组件会被标记为FunctionComponent类型，自带displayName、propTypes等属性的类型支持，但这些属性现在在TypeScript中已不是主流用法。

• 直接指定参数类型的优势

  • 完全掌控Props类型，没有隐含行为，避免不必要的类型冲突。
  • 无需额外导入FC类型，代码更简洁。
  • 组件Props定义更直白，可读性更强。

社区约定与趋势 #

当前React官方和TypeScript社区更推荐直接给参数指定Props类型，原因包括：

• React 18对FC的调整让其原有优势大幅弱化。
• 直接指定类型的写法更清晰，没有隐含的类型逻辑，降低团队协作的理解成本。
• 主流项目（如Next.js官方示例）已普遍采用这种写法。

当然，如果你的团队已经习惯FC的写法，继续使用也完全没问题——两者只是类型声明方式的差异，不会影响组件功能。

内容的提问来源于stack exchange，提问作者Daniel Preza