请问为何antd/dropdown的menu属性传递调用函数生成items会报错呢?

作者站长头像
站长
· 阅读数 6

我有如下的代码使用antd/Dropdown组件:

请问为何antd/dropdown的menu属性传递调用函数生成items会报错呢?

 const items: MenuProps["items"] = [
    {
      label: <div  onClick={() => {
        console.log('收藏: ')
      }}>收藏</div>,
      key: '0',
    },
    {
      label: <a>2nd menu item</a>,
      key: '1',
    },
    {
      type: 'divider',
    },
    {
      label: '3rd menu item',
      key: '3',
    },
  ];

...
 <Dropdown 
    key={nodeData.key} 
    menu={{ items }} 
    trigger={['click']} 
    open={isOpenObj[nodeData.key]}
    onOpenChange={()=>{
      updateIsOpenObj(nodeData.key, false)
    }}
    >
      <a onClick={(e) => {
        e.preventDefault()

      }}>
        <Space>
        </Space>
      </a>
    </Dropdown>

这样使用是没有问题的:调用打开dropdown:请问为何antd/dropdown的menu属性传递调用函数生成items会报错呢?

但是我修改为此代码(使用genDropdownItems()生成items,而不直接传递items,就会报错):

// 生成dropdown的key
  const genDropdownItems = (key: string | number): MenuProps["items"]  => {
    const items: MenuProps["items"] = [
      {
        label: <div  onClick={() => {
          console.log('收藏: ', key)
        }}>收藏</div>,
        key: '0',
      },
      {
        label: <a>2nd menu item</a>,
        key: '1',
      },
      {
        type: 'divider',
      },
      {
        label: '3rd menu item',
        key: '3',
      },
    ];
    return items 
  }


<Dropdown 
    key={nodeData.key} 
    //menu={{ items }} 
    menu={genDropdownItems(nodeData.key)}
    trigger={['click']} 
    open={isOpenObj[nodeData.key]}
    onOpenChange={()=>{
      updateIsOpenObj(nodeData.key, false)
    }}
    >
      <a onClick={(e) => {
        e.preventDefault()

      }}>
        <Space>
        </Space>
      </a>
    </Dropdown>

报错结果:请问为何antd/dropdown的menu属性传递调用函数生成items会报错呢?

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

Call Stack
Object.onlyChild [as only]

...

at PathnameContextProviderAdapter (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/shared/lib/router/adapters.js:79:11)
    at ErrorBoundary (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:5389)
    at ReactDevOverlay (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:7785)
    at Container (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/index.js:78:1)
    at AppContainer (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/index.js:182:11)
    at Root (webpack-internal:///../node_modules/.pnpm/registry.npmmirror.com+next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/index.js:396:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
回复
1个回答
avatar
test
2024-06-26

你少了对{}吧

const genDropdownItems = (key: string | number): MenuProps["items"]  => {
    const items: MenuProps["items"] = [
      {
        label: <div  onClick={() => {
          console.log('收藏: ', key)
        }}>收藏</div>,
        key: '0',
      },
      {
        label: <a>2nd menu item</a>,
        key: '1',
      },
      {
        type: 'divider',
      },
      {
        label: '3rd menu item',
        key: '3',
      },
    ];
    //return items
    return { items } 
  }
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容