未处理的运行时错误错误：React.Children.only 期望接收单个 React 元素子元素

Question

当我为下拉列表添加两个或更多数组时，它显示“未处理的运行时错误”

错误：React.Children.only 期望接收单个 React 元素子元素。”

import React from "react";
import { Table, Input ,Dropdown, menu,menuProps,Button,Space} from 'antd';
import 'antd/dist/antd.css';
import { DownOutlined, SearchOutlined , UserOutlined } from '@ant-design/icons';

const Example = () => {


    const items = [
        
        {
          label:'1st menu item',
          key: '1',
        },
        {
          label: '2nd menu item',
          key: '1',
        },
        
        {
          label: '3rd menu item',
          key: '1',
          
        },
        
        
      ];
    const item = [
        {
            label:'zm',
            key: '2',
          },
          {
            label: 'zm',
            key: '2',
          },
    ];
    return(
    <div>
        <h1>hello</h1>
    
                    <Dropdown menu= {{items,}} trigger={['click']}>
                        <a onClick={(e) => e.preventDefault()}>
                            <Space>
                                Select Property
                                <DownOutlined />
                            </Space>
                        </a>
                    </Dropdown>
                    <Dropdown menu= {{item,}} trigger={['click']}>
                        <a onClick={(e) => e.preventDefault()}><Space>Select Property<DownOutlined/></Space></a>
                    </Dropdown>                         
    </div>
    );
}
export default Example;

我想要两个包含 2 个不同内容的下拉列表。 ps：已经尝试删除之间的空格，但它的错误是相同的

Answer 1

如果我查看文档，要命名列表数据变量，菜单必须命名为“items”，如果使用“items”以外的变量名称，将会发生错误

或者你可以像这样使用

items={{ items: [ { label:'1st menu item', key: '1', }, ] }}

这样你就可以使用其他名称变量而不仅仅是使用项目变量。

如果你想自定义名称变量，你可以使用

const custome = [ { label:'1st menu item', key: '1', }, ]

然后你可以使用内部下拉菜单

<Dropdown menu= {{items: custome }} trigger={['click']}>

Answer 2

执行此菜单= {{items: customer}} 绝对有帮助。谢谢@asep-hidayat