这是场景:
我有一个自定义组件:
class MyComponent extends React.Component {
render () {
return (
<SuperComponent>
<SubComponent1 /> // <- valid child
</SuperComponent>
)
}
class MyComponent extends React.Component {
render () {
return (
<SuperComponent>
<SubComponent2 /> // <- No! It's not right shape
</SuperComponent>
)
}
并且引用的 SuperComponent 和 SubComponent1 是:
interface superPropsType = {
children: ReactElement<subPropsType1>
}
class SuperComponent extends React.Component<superPropsType> { ... }
interface subPropsType1 = {
name: string
}
class SubComponent1 extends React.Component<subPropsType1> { ... }
interface subPropsType2 = {
title: string
}
class SubComponent2 extends React.Component<subPropsType2> { ... }
<SubComponent2 />
我希望 SubComponent1 是 SuperComponent 的唯一有效子代,也就是说,如果我将或 Other types 作为子级,我希望 typescript 可以抛出错误<SuperComponent>
似乎打字稿只检查子级是否应该具有 ReactElement 的类型,但 ts 不会检查该子级的道具的形状(即 subPropsType1),也就是说,如果我将字符串或数字放置为 SuperComponent 的子级, ts 会抱怨类型要求不满足,但是如果我在这里放置任何 jsx 标签(将被转译为 ReactElement),ts 将保持沉默
任何想法 ?如果需要在此处发布任何配置,请随时询问
非常感谢任何想法和解决方案