нельзя использовать PopOver в пункте меню заголовка

Question

я хочу создать заголовок с поповера

import React from "react";
import { Layout, Menu, Button } from "antd";
const { Header, Popover } = Layout;
const { SubMenu } = Menu;

const Index = (props) => {
    const content = (
        <menu>
            <Menu.Item>Menu</Menu.Item>
            <SubMenu title="SubMenu">
                <Menu.Item>SubMenuItem</Menu.Item>
            </SubMenu>
        </menu>
    );
    return (
        <Header>
            <div
                className=" float-left text-light"
                style={{ fontSize: "1.4rem" }}
            >
                Shonode
            </div>
            <Menu
                theme="dark"
                mode="horizontal"
                defaultSelectedKeys={["2"]}
                style={{ lineHeight: "64px" }}
            >
                <Menu.Item key="1">nav 1</Menu.Item>
                <Menu.Item key="2">nav 2</Menu.Item>
                <Menu.Item key="3">sda</Menu.Item>

            </Menu>
        </Header>
    );
};

export default Index;

этот компонент работает, но когда я вставляю элемент 3 с помощью

<Menu.Item key="3">
       <Popover content={content}title="Title" trigger="hover">
        <Button>Hover me</Button>
    </Popover>
</Menu.Item>

я получаю ошибку

Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию с именованным импортом.

Answer 1

проблема в том, что вы пытаетесь импортировать Popover из Layout, который не является компонентом Layout

вместо:

import { Layout, Menu, Button } from "antd";
const { Header, Popover } = Layout; 

попробовать:

import { Popover, Layout, Menu, Button } from "antd";
const { Header } = Layout;