如何在同一页面切换多个react组件

我有一个使用 Material-ui 列表构建的用户仪表板。对于每个 listItem，我都有一个组件。我想要的是，当我单击列表元素时，有一个专门用于切换组件的部分。我在实现这个时遇到困难。这是我的代码。我不知道该放在哪里onClick处理程序。我将不胜感激任何线索。甚至在单击特定列表项时登录。然后我可以继续使用反应条件渲染。 在下图中，当用户单击“所有事件”时，右侧会呈现一个组件。什么时候MyEvents单击后，将渲染其组件。

Code:

UserTileData.js

export const profileFolderListItems = (
  <div>
    <ListItem button>
     <ListItemIcon>
       <SendIcon />
     </ListItemIcon>
     <Badge badgeContent={3} color='primary'>
       <ListItemText primary='Events attending' />
     </Badge>
     </ListItem>
     <ListItem button>
       <ListItemIcon>
        <CreateIcon />
       </ListItemIcon>
     <ListItemText primary='New Event' />
    </ListItem>

  </div>
)

UserProfilePage.js

 class UserProfile extends Component {
  constructor (props) {
    super(props)
    this.state = {
      componentTodisplay: null

    }
  }

  render () {
    const { classes } = this.props

    return (
      <div>

        <div className={classes.root}>

          <Drawer
            variant='permanent'
            classes={{
              paper: classes.drawerPaper
            }}
          >
            <div className={classes.toolbar} />
            <List >{eventsFolderListItems}</List>
            <Divider />
            <List>{profileFolderListItems}</List>
          </Drawer>
          <main className={classes.content}>
            <div className={classes.toolbar} />
            {/* componentToDisplay goes here */}

          </main>
        </div>
      </div>
    )
  }
}

UserProfile.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(UserProfile)

您应该使用 React Router（或任何类似的路由库）。

https://github.com/ReactTraining/react-router https://github.com/ReactTraining/react-router

https://reacttraining.com/react-router/web/example/basic https://reacttraining.com/react-router/web/example/basic

在下图中，当用户单击“所有事件”时，会出现一个组件 呈现在右侧。单击 MyEvents 时，会出现一个组件 对于它，被渲染。

如果用户可以浏览到/my-events and /all-events，或为它们添加书签。当用户按下浏览器中的后退/前进按钮时会怎样？

使用路由库可以解决所有这些问题（以及更多！）for you.