javascript - 如何使用文本而不是图标作为反应工具箱菜单？

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