Ant Design Header菜单集成Popover组件报错问题咨询

这个错误的核心原因是Popover组件的导入方式不对，还有一个容易忽略的小问题是你在Popover内容里用了小写的原生HTML标签，而不是Ant Design的Menu组件。

先看你代码里的问题点：

1. 错误的Popover导入：你写了const { Header, Popover } = Layout;，但Ant Design的Popover是独立组件，并不是Layout的子组件，这就导致你使用的Popover实际上是undefined，React自然会报错说元素类型无效。
2. 小写的menu标签：你在content里用了<menu>，这是原生HTML标签，而里面嵌套的是Ant Design的Menu.Item和SubMenu，必须使用大写开头的<Menu>组件，否则会出现渲染异常。

下面是修正后的完整代码：

import React from "react";
import { Layout, Menu, Button, Popover } from "antd"; // 直接从antd导入Popover
const { Header } = Layout; // 仅从Layout解构需要的Header
const { SubMenu } = Menu;

const Index = (props) => {
  const content = (
    <Menu> {/* 改为大写的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">
          <Popover content={content} title="Title" trigger="hover">
            <Button>Hover me</Button>
          </Popover>
        </Menu.Item>
      </Menu>
    </Header>
  );
};
export default Index;

简单总结两个关键修复：

• 把Popover从antd直接导入，不要从Layout里解构
• 将content中的<menu>替换为<Menu>组件

内容的提问来源于stack exchange，提问作者elsina