如何解决不能有一个只有一个孩子的儿童道具阵列吗?
我对 React 很陌生,并尝试尝试创建导航栏。 但是我遇到了一个问题,我似乎无法解决我有以下组件:
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
以及一个 Navitem 组件:
interface Props {
children: React.ReactElement<Navitem>[];
}
export class Navbar extends React.Component<Props,{}> {
render() {
return (
<div className={"navbar"}>
{this.props.children}
</div>
);
}
}
尝试创建导航栏时,如下所示:
interface Props{
label?: string;
}
export class Navitem extends React.Component<Props,{}>{
render(){
return <p>{this.props.label}</p>
}
}
我收到此错误:
<Navbar>
<Navitem label={"Item 1"}/>
</Navbar>
在使用多个 Navitem 进行尝试时,因为错误消息表明它有效。
最后我的问题是:是不是不可能有一个只有一个元素的子道具数组,或者我只是遗漏了什么。任何帮助表示赞赏!
(仅供参考我知道我可以
No overload matches this call.
This JSX tag's 'children' prop expects type 'ReactElement<Navitem,string | ((props: any) => ReactElement<any,string | ... | (new (props: any) => Component<any,any,any>)> | null) | (new (props: any) => Component<...>)>[] | ... 6 more ... | (ReactElement<...>[] & ReactPortal)' which requires multiple children,but only a single child was provided.
This JSX tag's 'children' prop expects type 'ReactElement<Navitem,but only a single child was provided. TS2769
但是每次我想用它做某事时我都必须检查它是单个对象还是数组)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。