如何解决AntD Dropdown显示侧边三个点及Hover触发报错的问题

问题原因 #

你出现报错和多余三个点的核心原因是组件嵌套错误：Dropdown.Button 是 AntD 官方封装好的「下拉菜单+按钮」组合组件，本身已经内置了 Dropdown 的相关逻辑，不需要再在外层套一层 <Dropdown> 组件。重复嵌套会导致渲染结构异常，同时不符合 Dropdown 要求仅接收单个子元素的规则，触发 React.Children.only 报错。

解决方案 #

两种修正方式任选其一即可：

方案1：保留Dropdown.Button，移除外层Dropdown #

直接把下拉相关的配置项写到Dropdown.Button组件上即可，代码示例：

<Column title="Category" render={(text, record) => (
    <Dropdown.Button 
      placement="bottomLeft"
      overlay={
        <Menu>
            {productCategories.map(category => (
                <Menu.Item key={category.id}>
                    <a href="#" onClick={(event) => {event.preventDefault(); }}>
                        {category.name}
                    </a>
                </Menu.Item>
            ))}
        </Menu>
    }
    >
        Category // eventually this will be the selected category name
    </Dropdown.Button>
)} />

方案2：保留外层Dropdown，替换子元素为普通Button #

如果你不需要Dropdown.Button的特殊样式，可以把内层的Dropdown.Button换成普通Button组件：

<Column title="Category" render={(text, record) => (
    <Dropdown placement="bottomLeft"
    overlay={
        <Menu>
            {productCategories.map(category => (
                <Menu.Item key={category.id}>
                    <a href="#" onClick={(event) => {event.preventDefault(); }}>
                        {category.name}
                    </a>
                </Menu.Item>
            ))}
        </Menu>
    }
    >
        <Button>
            Category // eventually this will be the selected category name
        </Button>
    </Dropdown>
)} />

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