Question

React的新手。我有一个React组件Navbar.js，它将显示在3个页面中：登陆，登录和主页，但每个页面中都有不同的标签。

例如，它将在登录页面中显示一个登录按钮选项卡，但是将隐藏在登录页面中，而在主页中，它将显示搜索框和注销按钮。

当我通过对URL进行测试时，试图从登录页面转到登录页面时隐藏菜单图标：

const opendrawer = (
      <IconButton
        className={classes.menuButton}
        color="inherit"
        aria-label="Open drawer"
      >
        <MenuIcon />
      </IconButton>
    );

 return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>

{window.location.href.includes("/login") ? null : opendrawer}


            </div>
          </Toolbar>
        </AppBar>

尝试此操作后，菜单图标确实隐藏了，但仅当我手动刷新页面时才会显示。

Answer 1

您可以为此使用道具，创建一个常量，告知要渲染此特定图标的元素。我在应用程序上做了类似的事情，我只想在某些页面上渲染底栏：

App.js

const tasks = {
  task1: {
    bottombar: true,
    // more features you want to turn on or off
  },
  task2: {
    bottombar: false,
  },

// Route is the React Component used for routing,
// Canvas is the component I use to draw the main pages of my app
// the {...props} passes all the feature configuration I previously did
// the module segment I pass the module to render, in this case those two tasks
<Route path="(/task1)" render={(props) => <Canvas {...props} module={tasks.task1} />} />
<Route path="(/task2)" render={(props) => <Canvas {...props} module={tasks.task2} />} />

Canvas.js

render() {
  return (
     // it will check if the props I passed here is true and render the component 
     // or the feature I want, If it is false, it will render nothing, undefined
     {this.props.module.bottombar ? <BottomBar {...this.props} selectedElement={this.state.selectedElement} /> : undefined}
  );
}

更改URL时如何在导航栏中添加/删除新标签页？

1 个答案: