不能有一个只有一个孩子的儿童道具阵列吗？

问题描述

我对 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 (将#修改为@）