Блог

Я использую React Typescript ANT Design

Я создаю меню, в котором один из элементов отвечает за импорт, но в этом случае пункт меню выглядит некорректно:

Вот код:

 <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>
  

Я бы попробовал переключить порядок использования в <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>