Question

我是TypeScript的新手。以下哪个声明在社区中是首选，为什么？

interface MyComponentProps {
  children: ReactNode;
}

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

// Option 2
const MyComponent = ({ children }: MyComponentProps) => <>{children}</>;

我认为选项1可能会提供更多的打字信息。但是，选项2似乎更易于阅读。

Answer 1

FC类型已经包含children属性，因此，在这种特定情况下，只需将其声明为FC类型就可以。

import React, { FC } from 'react';

const Component : FC = ({ children }) => <div>{children}</div>;

如果您需要的还不止这些，则可以使用第一个选项，如下所示：

import React, { FC } from 'react';

interface ComponentProps {
  title: string;
  subtitle?: string;
}

const Component : FC<ComponentProps> = ({ title, subtitle }) => (
  <div>
    <span>{title}</span>
    <span>{subtitle}</span>
  </div>
);

第一个选项几乎是我在许多不同项目中看到组件道具的唯一方式。

FC类型（顺便说一下，它是FunctionComponent的别名）提供了一些有用的声明，这些声明在第二个选项中会丢失。

React组件的类型声明首选项

1 个答案: