当 antd 下拉子级是 React 组件时无法工作

Question

import { Dropdown, Button } from 'antd';
import { memo } from 'react';
import type { MenuProps } from 'antd';
const headerMeau: MenuProps['items'] = [
{
key: '1',
label: 'test'
},
{
key: '2',
label: 'test2'
},
{
key: '3',
label: 'test3'
}
];
const A = function () {
return <Button>111</Button>;
};
const BookSpace = memo(() => {
return (
<Dropdown menu={{ items: headerMeau }} placement="bottomLeft" trigger={['click']}>
<A></A>
{/* {A()} */}
</Dropdown>
);
});
BookSpace.displayName = 'BookSpace';
export default BookSpace;

当它是

为{A()}时为正常

expected:当子组件是React组件时，它是正常的输入图片描述

Answer 1

这是因为Dropdown组件是Button组件和实际Menu的容器。

当您为Button编写自定义包装器时，Dropdown不知道如何处理它。因为它不再是Button组件，它是一个自定义的A组件，封装了一些JSX或Button组件。

但是当您执行{A()}时，它返回AntD的实际Button组件，并且它按预期工作。