react-toolbox菜單如何使用文本而不是圖標？

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