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>

我遇到错误

元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

Answer 1

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

代替：

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

尝试：

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

不能在标题菜单项中使用PopOver

1 个答案: