我可以在 TypeScript 中设置子项的类型吗？
例如我有这样的组件
class UserProfile extends React.Component<{ id: number }, void>{
}
class Thumbnail extends React.Component<{ children: UserProfile[] }, void>{
}
class UsersList extends React.Component<void, void>{
public render() {
return (
<div>
<Thumbnail><UserProfile id={1} /></Thumbnail>
<Thumbnail><UserProfile id={2} /></Thumbnail>
</div>
)
}
}
我想定义缩略图组件支持哪些特定子项，以避免这种情况：
class UsersList extends React.Component<void, void>{
public render() {
return (
<div>
<Thumbnail><UserProfile id={1} /></Thumbnail>
<Thumbnail><UserProfile id={2} /></Thumbnail>
<Thumbnail><span>Some plain text</span></Thumbnail> // This should be forbidden because Thumbnail component expects to have an array of UserProfile elements as it can handle them
</div>
)
}
}
这个例子不行，但是有什么办法可以实现吗？
在 React 组件中设置子元素的类型？
无法通过类型注释缩小范围（都是 JSX.Element）。可以通过运行时自省来完成（type每个孩子的财产）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
