react 多个html,reactjs-如何在同一页面上切换多个React组件

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

在下图中,当用户单击“所有事件”时,将在右侧呈现该事件的组件.单击MyEvents时,将呈现其组件.

码：

UserTileData.js

export const profileFolderListItems = (

)

UserProfilePage.js

class UserProfile extends Component {

constructor (props) {

super(props)

this.state = {

componentTodisplay: null

}

}

render () {

const { classes } = this.props

return (

variant='permanent'

classes={{

paper: classes.drawerPaper

}}

>

{eventsFolderListItems}

{profileFolderListItems}

{/* componentToDisplay goes here */}

)

}

}

UserProfile.propTypes = {

classes: PropTypes.object.isRequired

}

export default withStyles(styles)(UserProfile)