Как переключить несколько реагирующих компонентов на одной странице

Question

У меня есть сборка панели пользователя с использованием списка material-ui.Для каждого listItem у меня есть компонент для него.Что я хочу, так это то, что когда я щелкаю элемент списка, появляется раздел, посвященный переключению компонентов.У меня возникли проблемы с реализацией этого. Вот мой код. Я не уверен, где поставить обработчик onClick.Я буду признателен за любой свинец.Даже вход в систему при нажатии определенного listItem.Тогда я могу пойти дальше и использовать реактивный условный рендеринг.На рисунке ниже, когда пользователь нажимает Все события, компонент для этого отображается справа.При нажатии MyEvents отображается компонент для него.

Код:

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)

Answer 1

Вы должны использовать React Router (или любую аналогичную библиотеку маршрутизации).

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

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

На рисунке ниже, когдапользователь нажимает Все события, компонент для которых отображается справа.При щелчке по MyEvents отображается его компонент.

Возможно, было бы также полезно, если пользователь может перейти к /my-events и /all-events или добавить их в закладки.Как насчет того, когда пользователь нажимает кнопки назад / вперед в своем браузере?

Использование библиотеки маршрутизации решает все эти проблемы (и даже больше!) для вас.

Answer 2

Добавлена ​​пара изменений в ваш код.Теперь это выглядит так -

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.(Реагируйте на единственный источник правды, если вы не используете Redux)

• Условный рендеринг на основе переданного значения.

Надеюсь, вы поняли идею.