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 组件？

原文由 Kuldeep Bora 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>
);

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

It provides typechecking and autocomplete for static properties like displayName , propTypes , and defaultProps - However, there are currently known issues using defaultProps with React.FunctionComponent 。有关详细信息，请参阅此 问题- 向下滚动到我们的 defaultProps 部分以在此处输入建议。

它提供了子项的隐式定义（见下文）——然而，隐式子项类型存在一些问题（例如，DefiniteTyped#33006），无论如何，明确使用子项的组件可能被认为是一种更好的样式。

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

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

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

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

原文由 Kuldeep Bora 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于您使用的是 React 和 TypeScript，因此您应该始终使用第一种模式，因为这将确保您的组件具有更严格的类型，因为这意味着 PrintName 将是 React 功能组件类型，并且它需要在 Props 类型的道具中。

 const PrintName: React.FC<Props>

您可以在 React TypeScript 类型 存储库 中阅读功能组件的完整接口定义。

您提供的第二个示例不提供任何形式的类型，除了它是一个函数，它接受一组类型为 Props 的参数，并且它通常可以返回任何东西。

因此，写

const PrintName2 = (props:Props)

类似于

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

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

原文由 wentjun 发布，翻译遵循 CC BY-SA 4.0 许可协议