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

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

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

在下图中，当用户单击 All events 时，右侧会呈现该组件。单击 MyEvents 时，将呈现它的一个组件。

如果用户可以浏览/my-events和/all-events或将它们加入书签，这可能也会有所帮助。当用户按下浏览器中的后退/前进按钮时呢？

使用路由库可以为您解决所有这些问题（甚至更多！）。

对您的代码添加了一些更改。现在看起来是这样的——

UserTileData.js

export class profileFolderListItems {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        <ListItem button>
         <ListItemIcon>
           <SendIcon />
         </ListItemIcon>
         <Badge badgeContent={3} color='primary'>
           {/* notice the onClick handler here */}
           <ListItemText primary='Events attending' onClick={() => this.props.onSelectChange('events')}
         </Badge>
         </ListItem>
         <ListItem button>
           <ListItemIcon>
            <CreateIcon />
           </ListItemIcon>
         <ListItemText primary='New Event' />
        </ListItem>
      </div>
    )
  }
}

UserProfile.js

import { profileFolderListItems, eventsFolderListItems} from './UserTitleData';

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

    this.handleSelectOption = this.handleSelectOption.bind(this);
  }

  handleSelectOption(value) {
    this.setState({
        value: value
    });
  }

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

    return (
      <div>

        <div className={classes.root}>
          <Drawer
            variant='permanent'
            classes={{
              paper: classes.drawerPaper
            }}
          >
            <div className={classes.toolbar} />

          </Drawer>
          <main className={classes.content}>
            <div className={classes.toolbar} />
            {/* notice the conditional rendering here */}

            {this.state.value === 'events' ?
              (<List>
                <profileFolderListItems
                  onSelectChange={this.handleSelectOption}
                />
                </List>) : 
             this.state.value === 'profile' ?
               (
                 <List>
                   <profileFolderListItems
                     onSelectChange={this.handleSelectOption}
                   />
                 </List>
               ) : null}

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

基本上我在这里做的是 -

• 将值从 传递ListItemText给 onClick 处理程序。（每个选项都应该是唯一的。我events只是在这里通过）

• 将值提升到父组件 - UserProfilePage。（React 的唯一真实来源，除非您使用的是 Redux）

• 基于传递的值进行条件渲染。

希望你有这个想法。