【React】React.Children.only expected to receive a single React element child

时间:2024-04-03 12:00:51

背景:

React  项目使用Ant Design + Storybook时发报:

Uncaught Error: React.Children.only expected to receive a single React element child

【React】React.Children.only expected to receive a single React element child

问题点:

异常代码:

<Dropdown overlay={menu}>
    <Rate allowHalf defaultValue={4.5} disabled/>
    <span>4.8</span>
    <Icon type="down" style={{fontSize: 18}}/>
</Dropdown>

Ant Design中<Dropdown></Dropdown> 组件内部最外层只能接受一个元素,而代码中有三个元素,所以报错。

解决方案:

将三个元素用<div></div>包裹后OK,不再报错,页面可正常显示。

正确代码:

<Dropdown overlay={menu}>
    <div>
        <Rate allowHalf defaultValue={4.5} disabled/>
        <span>4.8</span>
        <Icon type="down" style={{fontSize: 18}}/>
    </div>
</Dropdown>