如何就地使用 ANT Design Menu.Item 和 Upload 组件？答案

【问题标题】：How to use ANT Design Menu.Item and Upload components in place?如何就地使用 ANT Design Menu.Item 和 Upload 组件？
【发布时间】：2021-02-06 11:53:39
【问题描述】：

我使用 React + Typescript + ANT 设计

我正在制作一个菜单，其中一项负责导入，但在这种情况下，菜单项看起来不正确：

代码如下：

<Menu.ItemGroup title={"Actions"}>
     <Menu.Item onClick={}><Icon type="save"/>{"Save"}</Menu.Item>
     <Menu.Item onClick={}><Icon type="delete"/>{"Delete"}</Menu.Item>
     <Upload customRequest={} showUploadList={false} accept=".txt">
           <Menu.Item onClick={}><Icon type="import"/>{"Import"}</Menu.Item>
     </Upload>
     <Menu.Item onClick={}><Icon type="export"/>{"Export"}</Menu.Item>
</Menu.ItemGroup>

【问题讨论】：

标签： reactjs typescript jsx antd

【解决方案1】：

我会尝试切换<Upload> 和<Menu.Item> 组件的使用顺序：

<Menu.ItemGroup title={"Actions"}>
     <Menu.Item onClick={}><Icon type="save">{"Save"}</Menu.Item>
     <Menu.Item onClick={}><Icon type="delete">{"Delete"}</Menu.Item>
     <Menu.Item onClick={}><Icon type="import">
        <Upload customRequest={} showUploadList={false} accept=".txt">
           {"Import"}
        </Upload>
     </Menu.Item>
     <Menu.Item onClick={}><Icon type="export">{"Export"}</Menu.Item>
</Menu.ItemGroup>

【讨论】：

这个方案不好，因为上传按钮不会覆盖整个。