如何在 Drawer - Material UI 中将 MenuItem 设置为活动状态？答案

【问题标题】：How can I set a MenuItem as active in Drawer - Material UI?如何在 Drawer - Material UI 中将 MenuItem 设置为活动状态？
【发布时间】：2017-09-22 14:26:42
【问题描述】：

我有这个代码：

            <Drawer 
                docked = {false}
                width = {330}
                open = {this.state.drawerOpen}
                onRequestChange = {(drawerOpen) => this.setState({drawerOpen})}
            >

                    <MenuItem primaryText="Inicio" onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/inicio"/>}/>
                    <MenuItem primaryText="Nueva Incidencia" onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/nueva_incidencia"/>}/>
                    <MenuItem primaryText="Incidencias Recibidas" onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/incidencias_recibidas"/>}/>
                    <MenuItem primaryText="Informes" /*onTouchTap = {() => this.currentPages('Informes')}*/onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/informes"/>}/>
            </Drawer>

我希望当我单击一个 MenuItem 时，它设置为“活动”（如在 Bootstrap 中），背景为浅灰色和类似的样式。我怎么能这样做？问题也是由于 React-Router 导致的，它卸载了组件 Menu 并重新渲染它，因此状态不可用。

谢谢。

【问题讨论】：

没人还有答案吗？

标签： css reactjs ecmascript-6 material-ui

【解决方案1】：

在最新版本的 Material UI（肯定在 v4 中）中，您可以使用 selected 属性，例如这是我的 <ListItemLink> 组件，我正在使用 ListItem 组件，但也适用于 MenuItem。请注意selected={to === location.pathname} 处的那一行：

import PropTypes, { InferProps } from 'prop-types'
import React from 'react'
import { Link, useParams, useLocation } from 'react-router-dom'

function ListItemLink({ disabled = false, icon, primary, to }: InferProps<typeof ListItemLink.propTypes>) {
  const location = useLocation()

  const renderLink = React.useMemo(
    () => React.forwardRef<HTMLAnchorElement>((itemProps, ref) => <Link to={to} ref={ref} {...itemProps} />),
    [to],
  )

  return (
    <ListItem
      button
      selected={to === location.pathname}
      disabled={disabled ?? false}
      component={renderLink}
    >
      {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
      <ListItemText primary={primary} />
    </ListItem>
  )
}

ListItemLink.propTypes = {
  icon: PropTypes.element,
  primary: PropTypes.string.isRequired,
  to: PropTypes.string.isRequired,
  disabled: PropTypes.bool
}

ListItemLink.defaultProps = {
  disabled: false
}

如果在某些时候，您想自定义默认选择的样式，只需在创建主题时覆盖它：

import { createMuiTheme } from '@material-ui/core/styles'
import { colors } from '@material-ui/core'


const theme = createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        "&$selected": {
          color: colors.blue[500],
          backgroundColor: colors.lightBlue[100]
        }
      }
    }
  }
})

export default theme

【讨论】：

【解决方案2】：

这是我的解决方法：

定义函数：

isActive = (value) => (location.pathname === value ? 'active' : '')

<MenuItem primaryText="Inicio" onTouchTap = {this.drawerOpened} 
className={this.isActive('/administrador/inicio')}
containerElement = {<Link to="/administrador/inicio"/>}/>

现在您只是缺少“活动”的 de css 样式。

【讨论】：

【解决方案3】：

如何围绕 MenuItem 创建一个包装组件并接受样式属性，然后将其应用于 MenuItem？

这可能会有所帮助： Toggle background color of list on click react.js

【讨论】：

非常感谢。我已经看到了。但我的问题也是由于我使用 React Router 的 Routes Link，并且组件重新渲染失去了他的状态。
哦，不知道，因为没有提到。我建议您是否可以发布一个单独的问题来使用 React Router 重新渲染来处理状态。
由于卸载和重新渲染组件，状态不可用，它们被设置为默认值。但是，我只有一个状态：opened: true/false，没有了。谢谢。

【解决方案4】：

@jpnazar 的答案几乎是正确的。但是， containerElement 属性不再起作用。您现在可以使用上面的代码来指定链接了。

import { Link } from 'react-router-dom';
import MenuItem from '@material-ui/core/MenuItem';

...

<MenuItem component={Link} to="/your-path">...</MenuItem>

查看问题。 https://github.com/mui-org/material-ui/issues/204

【讨论】：