TypeScript 结合 React 开发时候 , React.FunctionComponent 解释

在 TypeScript 结合 React 开发时，React.FC（或 React.FunctionComponent）是一个泛型类型，它用于定义函数组件的类型。这个类型定义了函数组件的结构和预期行为，并且提供了泛型支持，以便你可以指定组件 props 的类型。

React.FC 做了以下几件事情：

1. 定义 Props 类型:
   通过泛型参数，React.FC 允许你指定 props 的类型。例如：

   type MyComponentProps = {
     message: string;
   };
   
   const MyComponent: React.FC<MyComponentProps> = ({ message }) => {
     return <div>{message}</div>;
   };
   

   在这个例子中，MyComponent 的 props 类型被定义为 MyComponentProps。

2. 隐含 children:
   React.FC 隐式地给组件的 props 类型添加了 children 属性，这意味着你可以在组件中使用 props.children 而不需要在你的类型定义中显式声明它。

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

   在这个例子中，即使 MyComponentProps 没有定义 children 属性，你也可以使用它，因为 React.FC 已经包含了它。

3. 返回类型:
   React.FC 类型也隐式地定义了组件的返回类型，这意味着你的组件返回的必须是一个 React 元素或者 null。

4. PropTypes 和 defaultProps:
   React.FC 类型还提供了对 propTypes 和 defaultProps 的支持。虽然在 TypeScript 中，propTypes 不如类型定义那么常用，但 defaultProps 的支持可以让你为 props 设置默认值。

   const MyComponent: React.FC<MyComponentProps> = ({ message = "Hello" }) => {
     return <div>{message}</div>;
   };
   

   在这个例子中，如果没有提供 message prop，它会默认为 “Hello”。

然而，使用 React.FC 并不是没有争议的。有一些原因导致一些开发者选择不使用 React.FC：

• 显式与隐式:
  一些开发者更喜欢显式地声明 children，以便更清楚地了解组件的 props 结构。

• defaultProps 的行为:
  在使用泛型和默认 props 的情况下，defaultProps 有时会与 TypeScript 的类型推断发生冲突。

• 组件返回类型:
  当你不希望组件返回 null 时，使用 React.FC 可能会让类型检查变得不那么严格。

因此，是否使用 React.FC 取决于你的个人或团队的偏好。一些团队可能会选择不使用 React.FC 并直接声明函数的类型，例如：

type MyComponentProps = {
  message: string;
  children?: React.ReactNode; // 显式地声明 children
};

const MyComponent = ({ message, children }: MyComponentProps) => {
  return <div>{message}{children}</div>;
};

在这种方式中，你完全控制了组件的 props 类型定义，并且避免了 React.FC 可能引入的任何隐式行为。

原文地址：https://blog.csdn.net/qq_42391246/article/details/136343015

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！