无法在标题菜单项中使用PopOver

Question

我想创建一个带有popover组件的页眉

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>

我得到了错误

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: undefined。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

Answer 1

问题是您试图从Layout导入Popover，而Layout不是Layout的组件

而不是：

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

尝试：

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