Question

MaterialUI的工具提示，在客户端控制台“失败的道具类型”上推送警告。但是我的组件中没有使用过这样的道具

我的客户端控制台上的警告：

Warning: Failed prop type: The following properties are not supported: `tabIndex`, `onFocus`. Please remove them.

Warning: Failed prop type: The following properties are not supported: `className`. Please remove them.

屏幕截图：Screenshot_1，Screenshot_2

当我在以下工具提示中有子组件时，就会发生这种情况：

<Tooltip title="Push Order" placement="bottom" classes={{ tooltip:classes.tooltip }}>
  <IconButton>
   <ShoppingBasket classes={{ root: classes.icon }} />
  </IconButton>
</Tooltip>

受此问题影响的整个组件：

import React from 'react'
import { Meteor } from 'meteor/meteor'
import { Roles } from 'meteor/alanning:roles'
import { Link } from 'react-router-dom'
import styled from 'styled-components'
import { MenuList, MenuItem, Tooltip } from '@material-ui/core'

import HomeIcon from '@material-ui/icons/Home'
import FlightIcon from '@material-ui/icons/Flight'
import AccountCircle from '@material-ui/icons/AccountCircle'
import ExitToApp from '@material-ui/icons/ExitToApp'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { ActionCreators } from '../../../app/actions'

const StyledMenuItem = styled(MenuItem)`
  && {
    text-transform: uppercase;
    @media screen and (min-width: 960px) {
      display: inline-flex;
    }
  }
`

class NavItem extends React.Component {
  constructor(props) {
    super(props)
    const { checkUserId } = props
    checkUserId()
  }

  logOut = () => {
    const { checkUserId } = this.props
    Meteor.logout(error => {
      if (error) {
        console.log(error)
      }
      checkUserId()
    })
  }

  render() {
    const { menuState, userId, toggleMenuState } = this.props
    const isAdmin = Roles.userIsInRole(userId, ['admin'])
    const isLoggedIn = userId !== null
    return (
      <div>
        {!userId || !menuState ? (
          <MenuList>
            {isLoggedIn ? (
              <Tooltip title="Switch Menus" placement="bottom">
                <StyledMenuItem onClick={() => toggleMenuState(!menuState)}>
                  <HomeIcon />
                </StyledMenuItem>
              </Tooltip>
            ) : (
              <StyledMenuItem component={Link} to="/">
                <HomeIcon />
              </StyledMenuItem>
            )}

            <StyledMenuItem component={Link} to="/products">
              producten
            </StyledMenuItem>
            <StyledMenuItem component={Link} to="/blogs">
              BLOGS
            </StyledMenuItem>
            <StyledMenuItem component={Link} to="/contact">
              CONTACT
            </StyledMenuItem>
            {isLoggedIn ? (
              <Tooltip title="Sign Out" placement="bottom">
                <StyledMenuItem onClick={() => this.logOut()}>
                  <ExitToApp />
                </StyledMenuItem>
              </Tooltip>
            ) : (
              <Tooltip title="Sign In" placement="bottom">
                <StyledMenuItem component={Link} to="/auth/sign-in">
                  <AccountCircle />
                </StyledMenuItem>
              </Tooltip>
            )}
          </MenuList>
        ) : (
          <MenuList>
            <StyledMenuItem
              component={Link}
              to={isAdmin ? '/missions/requests/admin' : '/missions/requests/user'}
            >
              Requests
            </StyledMenuItem>
            <StyledMenuItem
              component={Link}
              to={isAdmin ? '/missions/orders/admin' : '/missions/orders/user'}
            >
              Orders
            </StyledMenuItem>

            {isAdmin ? (
              <StyledMenuItem component={Link} to="/users/list">
                Users
              </StyledMenuItem>
            ) : (
              ''
            )}
            {isAdmin ? (
              <StyledMenuItem component={Link} to="/versions">
                Versions
              </StyledMenuItem>
            ) : (
              ''
            )}
            {menuState ? (
              <Tooltip title="Switch Menus" placement="bottom">
                <StyledMenuItem onClick={() => toggleMenuState(!menuState)}>
                  <FlightIcon />
                </StyledMenuItem>
              </Tooltip>
            ) : (
              ''
            )}
            <Tooltip title="Sign Out" placement="bottom">
              <StyledMenuItem onClick={() => this.logOut()}>
                {isLoggedIn ? <ExitToApp /> : ''}
              </StyledMenuItem>
            </Tooltip>
          </MenuList>
        )}
      </div>
    )
  }
}

const mapStateToProps = state => ({
  menuState: state.mainReducer.menuState,
  userId: state.mainReducer.userId,
})

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ActionCreators, dispatch)
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(NavItem)

Answer 1

这是该实施方案的当前限制。 MenuList的直接子代应为MenuListItem。尝试将工具提示放在MenuListItem内。

MaterialUI的工具提示组件在客户端控制台上记录警告

1 个答案: