reactjs - Tilføjelse af element til antd Dropdown overlay-egenskab resulterer i React-fejl om enkelt barn

Nedstrippet kode:

const menu = (
  <Menu>
    <Menu.Item>
      1st menu item
    </Menu.Item>
  </Menu>
);

export const QBDropdown: React.FC = () => 
  <div>
    <Dropdown overlay={menu} />
  </div>

Når man forsøger at udfylde overlay-ejendommen i antd-dropdown, opstår følgende fejl altid:

Fejl: React.Children.only forventede at modtage et enkelt React-element som barn.

Det gør det tilsyneladende uanset, hvad jeg fylder det med. En enkelt <div></div> eller <></> giver den samme fejl. Hvad foregår der her?

Svar #1

Dropdown-menuen skal have et barn, hvilket kan verificeres ved hjælp af React.Children.only

 <div>
    <Dropdown overlay={menu}>
      <button>Something to trigger the menu</button>
    </Dropdown>
  </div>

https://reactjs.org/docs/react-api.html#reactchildrenonly

https://github.com/ant-design/ant-design/blob/bf72f5538a9a788639bd4b56a1ccc9f86ea453c3/components/dropdown/dropdown.tsx#L144

Svar #2

Prøv at bruge en Dropdown som denne i antd v5

const profileItems = [
{
  key: "1",
  label: (
    <a target="_blank" rel="noopener noreferrer">
      1st menu item
    </a>
  ),
},
{
  key: "2",
  label: (
    <a target="_blank" rel="noopener noreferrer">
      2nd menu item (disabled)
    </a>
  ),
  icon: <LoginOutlined />,
  disabled: true,
},
{
  key: "3",
  label: (
    <a target="_blank" rel="noopener noreferrer">
      3rd menu item (disabled)
    </a>
  ),
  disabled: true,
},
{
  key: "4",
  danger: true,
  label: "a danger item",
}]

<Dropdown menu={{ items: profileItems }}>
   <div className="logo">
      <LoginOutlined />
      <div>Profile</div>
   </div>
</Dropdown>

Relaterede artikler