当前位置: 首页 > 面试题库 >

如何使用MenuItem导航?材质用户界面V1

何超英
2023-03-14
问题内容

为什么不清楚MenuItem如何导航到其他路线?

例如,当单击菜单项时,我要路由到“ /帐户”

我可以使用onclick函数来实现这一点,但是我敢肯定有一种更简单的方法。请告诉我有关它的信息,我想在我的项目中实现它。

顺便说一句,当使用containerElement时,出现containerElement={<Link to="/dashboard" />}以下错误:

index.js:2177 Warning: React does not recognize the `containerElement` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `containerelement` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in li (created by ButtonBase)
    in ButtonBase (created by withStyles(ButtonBase))
    in withStyles(ButtonBase) (created by ListItem)
    in ListItem (created by withStyles(ListItem))
    in withStyles(ListItem) (created by MenuItem)
    in MenuItem (created by withStyles(MenuItem))
    in withStyles(MenuItem) (at MenuAppBar.js:116)
    in ul (created by List)
    in List (created by withStyles(List))
    in withStyles(List) (created by MenuList)
    in MenuList (created by Menu)
    in div (created by Paper)
    in Paper (created by withStyles(Paper))
    in withStyles(Paper) (created by Popover)
    in Transition (created by CSSTransition)
    in CSSTransition (created by Grow)
    in Grow (created by withTheme(Grow))
    in withTheme(Grow) (created by Popover)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by withStyles(Modal))
    in withStyles(Modal) (created by Popover)
    in Popover (created by withStyles(Popover))
    in withStyles(Popover) (created by Menu)
    in Menu (created by withStyles(Menu))
    in withStyles(Menu) (at MenuAppBar.js:101)
    in div (at MenuAppBar.js:92)
    in div (created by Toolbar)
    in Toolbar (created by withStyles(Toolbar))
    in withStyles(Toolbar) (at MenuAppBar.js:77)
    in header (created by Paper)
    in Paper (created by withStyles(Paper))
    in withStyles(Paper) (created by AppBar)
    in AppBar (created by withStyles(AppBar))
    in withStyles(AppBar) (at MenuAppBar.js:76)
    in div (at MenuAppBar.js:62)
    in MenuAppBar (created by Connect(MenuAppBar))
    in Connect(MenuAppBar) (created by withStyles(Connect(MenuAppBar)))
    in withStyles(Connect(MenuAppBar)) (at Test.js:9)
    in div (at Test.js:7)
    in Test (created by Route)
    in Route (at App.js:37)
    in Switch (at App.js:34)
    in div (at App.js:32)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:31)
    in div (at App.js:30)
    in App (created by Connect(App))
    in Connect(App) (at index.js:34)
    in MuiThemeProvider (created by MuiThemeProviderWrapper)
    in MuiThemeProviderWrapper (at index.js:33)
    in Provider (at index.js:32)

当我通过containerElement->
修复该错误时,containerelement该错误消失了,这是一个好消息,但坏消息是该菜单没有适用于Link中提到的死记硬背!

MenuAppBar.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import AccountCircle from 'material-ui-icons/AccountCircle';
import Switch from 'material-ui/Switch';
import { FormControlLabel, FormGroup } from 'material-ui/Form';
import Menu, { MenuItem } from 'material-ui/Menu';

import Button from 'material-ui/Button';

import { connect } from 'react-redux';
import {Link } from 'react-router-dom'


const styles = {
  root: {
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
};

class MenuAppBar extends Component {

  state = {
    auth: true,
    anchorEl: null,
  };

  handleChange = (event, checked) => {
    this.setState({ auth: checked });
  };

  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    // console.log(this.props.auth)
    // if(!this.props.auth)
      // return <div> Loading... </div>;

    const { classes } = this.props;
    const { auth, anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return (
      <div className={classes.root}>



        {/* the log switch */}
       {/* <FormGroup>        
                 <FormControlLabel
                   control={
                     <Switch checked={auth} onChange={this.handleChange} aria-label="LoginSwitch" />
                   }
                   label={auth ? 'Logout' : 'Login'}
                 />
               </FormGroup>*/}

        <AppBar position="static">
          <Toolbar>

            {/*
            <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
              <MenuIcon />
            </IconButton> */}

            <Typography type="title" color="inherit" className={classes.flex}>
              المواعيد
            </Typography>



            {/*If logged in */}
            {this.props.auth && (
              <div>
                <IconButton
                  aria-owns="menu-appbar-logged"
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                  color="contrast"
                >
                  <AccountCircle />
                </IconButton>
                <Menu
                  id="menu-appbar-logged"
                  anchorEl={anchorEl}
                  anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  open={open}
                  onClose={this.handleClose}
                >
                  {/*Changing font for this text is on the them and there search for subheading*/}
                  <MenuItem onClick={this.handleClose}  containerelement={<Link to="/dashboard" />}>الملف الشخصي</MenuItem>
                  <MenuItem onClick={this.handleClose} href="/api/logout">تسجيل الخروج</MenuItem>
                </Menu>
              </div>
            )}
            {/*end*/}




            {/*If logged out */}
            {!this.props.auth && (
              <div>
               <Button color="contrast" href="/auth/google/">تسجيل الدخول</Button>
              </div>
            )}
            {/*end*/}


          </Toolbar>
        </AppBar>


      </div>
    );
  }
}

MenuAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

function mapStateToProps({auth}){
  return {auth}
}

export default withStyles(styles)(connect(mapStateToProps)(MenuAppBar));

Updae

我发现了@Gavin Thomas先生下面提出的解决方案所引起的另一个问题,该解决方案涉及SO的帖子。问题在于,using只是将提及的“to”属性值放在链接到现有路由的URL中,而不去该路径,即

<MenuItem onTouchTap={() => {this.handleClose()}}><NavLink to="/api/logout">Sign Out</NavLink></MenuItem>

最终使浏览器上的链接为http:// localhost: 3000 /
logout,而没有在nodejs后端服务器上的注销路由上到达那里!那是个问题。

请注意,我使用代理从 30005000 进行定向,如下所示

 "proxy": {
    "/api/*": {
      "target": "http://localhost:5000"
    }
  },

一般来说,我猜想是因为和之间的差异!

因此,请帮助我解决第二个问题!


问题答案:

这是我们发现的…

您现在需要使用<NavLink> vs Link

反应material-ui MenuItemcontainerElement不起作用

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import Drawer from 'material-ui/Drawer'

    <Drawer
         docked={false}
         open={this.state.open}
         onRequestChange={(open) => this.setState({open})}>
         <MenuItem onTouchTap={() => {this.handleClose()}} >
              <NavLink to="/">Home </NavLink>
         </MenuItem>
         <MenuItem onTouchTap={() => {this.handleClose() }} >
              <NavLink to="/about"> About Us </NavLink>
         </MenuItem>
    </Drawer>


 类似资料:
  • 谁能告诉我如何导入gradle for(libandroid导航用户界面),因为我正在添加模块。这个梯度是什么,我已经试过编译com了。地图框。mapboxsdk:mapbox android导航ui:0.5.0’,但没有成功。 谢谢

  • 问题内容: 我正在努力实现的目标 我有两个类- 和-我想影响状态上的类(例如)。 我的尝试 我想显示上。 预期产量 : 电流输出: 环境 我在React.js中使用Material-UI。在这种情况下,我正在使用导出。 问题答案: 下面是正确的语法: 相关答案和文档: jss-plugins嵌套文档

  • 新手入门 - 界面导航 百度统计的界面由导航菜单、报告导航、数据筛选区域等8个模块组成。 1 . 导航菜单 导航菜单包括主页、报告、管理、应用中心四项,显示在百度统计每个屏幕的顶部,便于您快速访问。 主页:方便你快速查看账户下的站点数据信息,洞察全局。 报告:为您提供三十多种报告数据,轻松分析系统的访问情况。 管理:您可以在这里管理您的账户、站点、代码、邮件订阅、权限等各种设置信息。 应用中心:百

  • 我正在使用一个材质用户界面来创建一个输入和一个带有降档的预输入选择器类型组件的标签。 我看了演示,得到了这个: 我的inputProps等于: 我的前任在材料 UI 输入标签组件上定义了这些Props 属性,但是为了让由属性标记的咏叹调工作,我使用了单个 。 打印出输入和标签道具的内容提供: 我的问题是没有向DOM呈现标签。我得到的最接近的是一个带有label属性的div,它包装输入,但不显示任何

  • 创建和使用材质 通过主菜单 Assets->Create->Material 或项目视图的上下文菜单,可以创建一个新材质。 默认情况下,新建材质会分配标准着色器,并且所有属性都空着,就像这样: 一旦材质被创建,你就可以把它应用到一个对象,并且在 检视视图 中修改它的所有属性。想把材质应用到一个对象上,只需要把材质从 项目视图 拖动到 场景是图 或 层级视图 中的任意对象上。 设置材质属性 你可以为

  • 我想显示现在说唱文字,比如...我怎么能改变它通过使用材料UI 它像那样显示“身体1”。Lorem ipsum dolor坐在这里,奉献给我们。克罗斯·布兰迪特..." 但我想表现得像“身体1.洛雷姆·伊普苏姆·多洛·希特·阿梅特,奉献给精英们。库斯·布兰迪。。。더보기" 你能帮我吗?