如何在同一页面上切换多个React组件 [英] How to switch multiple react components on same page

问题描述

我有一个使用material-ui列表的用户仪表板构建.对于每个listItem，我都有一个组件.我想要的是，当我单击列表元素时，有一个专用于切换组件的部分.我在实现它时遇到麻烦.这是我的代码.我不确定将onClick处理程序放在哪里.我将不胜感激.单击特定listItem时甚至登录.然后，我可以继续使用React条件渲染. 在下图中，当用户单击所有事件"时，将在右侧呈现该事件的组件.单击MyEvents时，将呈现它的组件.

I have a user dashboard build using material-ui list. For each listItem i have a component for it. What I want is, when I click a list element, there is a section dedicated for switching the components. I am having trouble implementing this.Here is my code.I am not sure where to put onClick handler. I will appreciate any lead. Even loggin when a particular listItem is clicked. Then I can go ahead and use react conditional rendering. In the picture below, when a user clicks All events, a component for that is rendered on the right. When MyEvents is clicked, a component for it, is rendered.

代码:

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(或任何类似的路由库).

You should use React Router (or any similar routing library).

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

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

在下图中，当用户单击所有事件"时， 呈现在右侧.单击MyEvents时，一个组件 为此，被渲染.

In the picture below, when a user clicks All events, a component for that is rendered on the right. When MyEvents is clicked, a component for it, is rendered.

如果用户可以浏览到/my-events和/all-events或为其添加书签，这也可能会有所帮助.当用户在浏览器中按下后退/前进按钮时该怎么办?

It would probably also be helpful if the user can browse to /my-events and /all-events, or bookmark them. What about when the user presses the back/forward buttons in their browser?

使用路由库可以为您解决所有这些问题(甚至更多！) .

Using a routing library solves all of these problems (and more!) for you.

这篇关于如何在同一页面上切换多个React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！