我在其中一个反馈原生教程中遇到了以下语法。组件声明如下:
export default class App extends Component<{}> {
//implementation
}
我的问题是:这个<{}>
是什么意思,这个声明与此有什么不同:
export default class App extends Component {
答案 0 :(得分:2)
这是一个typescript语法,import Header from './Header.jsx
import appSass from './App.scss'
内部的内容是您期望该对象的类型。
答案 1 :(得分:2)
该片段是用打字稿编写的。 <>
语法用于指定组件的通用约束。
我的建议是,如果你不使用打字稿,你基本上可以在阅读教程时忽略这种表示法。但是,如果你有兴趣了解更多:< / p>
以下是typescript generics的文档。
Component
类中的here is some documentation特别针对打字稿做出反应/反应原生。
基本上,react组件有两个泛型参数,一个用于组件的属性(this.props
),另一个用于状态(this.state
)。
此外,{}
是没有属性的空对象的类型,因此这基本上意味着可以创建组件而不指定任何属性。您可以在JSX中使用此组件,只需一个简单的<App />
。您应该注意,默认情况下,道具和州只是{}
,因此他们不需要像在您的第一个代码段中那样手动指定。实际上,第一个和第二个片段在功能上是相同的(尽管只有第二个片段是有效的jsx,第一个片段需要打字稿编译)。
最后,虽然另一个答案是正确的,但你应该注意到<>
中的内容在这种情况下特别是组件的类型&#39;道具&#39;对象,通过this.props
在组件中访问。一般来说,泛型约束几乎可以代表任何东西,但在这种特殊情况下,它就是道具的类型。
答案 2 :(得分:1)
当我们谈论反应/反应原生时,它比打字稿更有可能是(facebook&#39; s)flow。
它们的语法非常相似,在这种情况下是相同的,但是RN的打包器支持开箱即用,通常使用.js
扩展,并且在该生态系统中更为普遍。
无论哪种方式,@ CRice的含义是正确的 - 它是generic,在这种情况下是indicates the type of the class component's props。