如何在工具箱菜单中使用文本代替图标？

Question

我正在为我的网站使用react-toolbox菜单。根据文档React-toolbox menu中给出的示例，我只能使用icon作为菜单。如何在菜单中使用文本呢？

我想做的事的例子：

当我单击博客文本（即菜单）时，将显示menuItem。

是否可以这样做？

Answer 1

只需从MenuItem组件中删除图标属性

 <IconMenu icon={<div>blog</div>} position='topLeft' menuRipple>
  <MenuItem value='download' caption='Download' />
  <MenuItem value='help' caption='Favorite' />
  <MenuItem value='settings' caption='Open in app' />
  <MenuDivider />
  <MenuItem value='signout' icon='delete' caption='Delete' disabled />
 </IconMenu>

Answer 2

您可以像这样将元素传递给icon属性：

<IconMenu icon={<div>Menu</div>} position='topLeft' menuRipple>

Answer 3

如果其他人有问题，解决方案是使用Menu组件而不是IconMenu。像这样：

const [menuActive, setMenuActive] = useState(false);
return (
  <div style={{ position: 'relative' }}>
    <Button label='Actions' onClick={() => setMenuActive(!menuActive)} />
    <Menu position='topRight' active={menuActive} onHide={() => setMenuActive(false)}>
     <MenuItem value='download' caption='Download' />
     <MenuItem value='action' caption='Action' />
    </Menu>
  </div>
);