javascript - <{}> 在 javascript 的扩展末尾意味着什么？

Question

我在 react-native 的教程之一中遇到了以下语法。组件的声明如下所示:

export default class App extends Component<{}> {

//implementation

}

我的问题是:这 <{}> 是做什么用的？意思是这个声明与此有何不同:

export default class App extends Component {

?

Answer 1

该片段是用 typescript 写的。 <>语法用于指定组件上的通用约束。

我的建议是，如果您不使用 typescript，则在阅读本教程时基本上可以忽略此符号。但是，如果您有兴趣了解更多信息:

这是关于 typescript generics 的文档.

和here is some documentation在 Component 上专门针对 typescript 的 react/react-native 中的类。

基本上，一个 React 组件有两个通用参数，一个用于组件的属性 (this.props)，另一个用于状态 (this.state)。

此外，{}是没有属性的空对象的类型，所以这基本上意味着可以在不指定任何属性的情况下创建您的组件。您可以在 JSX 中使用这个组件，只需一个简单的 <App /> .您应该注意，默认情况下，props 和 state 都是简单的 {}。因此他们不需要像在您的第一个代码段中那样手动指定。事实上，第一个和第二个片段在功能上是相同的(虽然只有第二个是有效的 jsx，第一个需要 typescript 编译)。

最后，虽然另一个答案是正确的，但您应该注意 <> 中的内容在这种情况下，特别是组件的“props”对象的类型，在组件中通过this.props 访问。 .通常，通用约束几乎可以表示任何内容，但在这种特殊情况下，它是 Prop 的类型。