TypeScript React.FC<Props> 混淆

Question

我正在学习 TypeScript，有些东西让我感到困惑。一位如下：

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

const PrintName2 = (props: Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

对于上面的两个功能组件，我看到 TypeScript 生成了相同的 JS 代码。PrintName2就可读性而言，该组件对我来说似乎更加精简。我想知道这两个定义之间有什么区别，是否有人在使用第二种类型的 React 组件？

Answer 1

谢谢大家的回答。他们是正确的，但我正在寻找更详细的版本。我做了更多的研究，并在 GitHub上的React+TypeScript Cheatsheets上找到了这个。

函数组件
这些可以写成普通函数，它们接受一个 props 参数并返回一个 JSX 元素。

type AppProps = { message: string }; /* could also use interface */

const App = ({ message }: AppProps) => <div>{message}</div>;

怎么样React.FC/ React.FunctionComponent？您还可以使用React.FunctionComponent（或简写React.FC）编写组件：

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

与“正常功能”版本的一些区别：

它提供了类型检查和自动完成像静态属性displayName，propTypes以及defaultProps-但是，也有使用目前已知的问题defaultProps有React.FunctionComponent。有关详细信息，请参阅此问题- 向下滚动到我们的defaultProps部分以在那里输入建议。

它提供了子项的隐式定义（见下文）——但是，隐式子项类型存在一些问题（例如绝对类型#33006），无论如何，对于使用子项的组件进行显式显示可能被认为是一种更好的风格。

const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title
}) => <div title={title}>{children}</div>;

将来，它可能会自动将 props 标记为只读，但如果 props 对象在参数列表中被解构，这是一个有争议的问题。

React.FunctionComponent 返回类型是显式的，而普通函数版本是隐式的（否则需要额外的注释）。

在大多数情况下，使用哪种语法几乎没有区别，但React.FC语法稍微冗长，没有提供明显的优势，因此优先考虑“普通函数”语法。

Answer 2

React.FC不是键入 React 组件的首选方式，这里是一个链接。

我个人使用这种类型：

const Component1 = ({ prop1, prop2 }): JSX.Element => { /*...*/ }

React.FC缺点的简短列表：

1. 提供子项的隐式定义，即使您的组件不需要有子项。这可能会导致错误。
2. 不支持泛型。
3. 不能与defaultProps.

Answer 3

由于您使用的是 React 和 TypeScript，因此您应该始终使用第一种模式，因为它会确保您的组件具有更严格的类型，因为它意味着PrintName将是 React Functional Component 类型，并且它接受 type 的 props Props。

const PrintName: React.FC<Props>

您可以在 React TypeScript 类型存储库中阅读 Functional Components 的完整接口定义。

您提供的第二个示例不提供任何形式的类型，只是它是一个函数，它采用一组 type 参数Props，并且它可以返回任何一般的东西。

因此，写

const PrintName2 = (props:Props)

类似于

const PrintName2: JSX.Element = (props:Props) 

因为 TypeScript 肯定无法自动推断它是一个功能组件。

Answer 4

第一个版本会为你添加一些类型——它们来自 React.FC

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

这有几个原因很有用，但一个明显的原因是您的组件是否有子组件。那么你就不需要手动添加一个children prop