Динамическое изменение содержимого вкладки в материале UI

Question

У меня есть div, содержащий вкладки (материал ui) на моей странице приложения-приложения. Он имеет две вкладки. Одна из вкладок имеет listview (material-ui). Я хочу, чтобы такое поведение, что, когда я нажимаю элемент списка в списке, тогда содержимое вкладки должно исчезать (или скрывать или изменять) listview и давать другое представление моей вкладке. Как я мог добиться этого.

return (
      <MuiThemeProvider> 
       <div className="videoPageTabs"> 
        <Tabs> 
         <Tab label="Tags" style={{backgroundColor:"#293C8E"}}> 
          <TagList/> 
         </Tab> 

ListItems компонент "TagList"

return (
      <div> 
       <List id="parent-list-tags" > 
        <ListItem primaryText="Item 1" onClick={this.handleClicked} /> 
        <Divider/> 
        <ListItem primaryText="Item 2" onClick={this.handleClicked} /> 
        <Divider/> 
        <ListItem primaryText="Item 3" onClick={this.handleClicked} /> 
        <Divider/> 
        <ListItem primaryText="Item 4" onClick={this.handleClicked}/> 
        <Divider/> 
        <ListItem primaryText="Item 5" onClick={this.handleClicked}/> 
        <Divider/> 
        <ListItem primaryText="Item 6" onClick={this.handleClicked} /> 
       </List> 

      </div> 

"Вкладки компонент". Вы можете видеть, что я пропускаю Taglist в качестве вида для «тегов» вкладки. Я хочу, чтобы это представление изменялось всякий раз, когда я нажимаю listitem. Я хочу заменить компонент «Taglist» с другим компонентом «Компонент A» всякий раз, когда нажимается любой элемент списка.

return (
      <MuiThemeProvider> 
       <div className="videoPageTabs"> 
        <Tabs> 
         <Tab label="Tags" style={{backgroundColor:"#293C8E"}}> 
          <TagList/> 
         </Tab> 
         <Tab label="Info" style={{backgroundColor:"#293C8E"}}> 
          <div> 
           <h3 style={styles.headline}>Title : Name</h3> 


          </div> 
         </Tab> 
        </Tabs> 

       </div> 
      </MuiThemeProvider> 

     ); 

Я хочу заменить это другим компонентом каждый раз, когда я нажимаю элемент списка. Здесь полезны маршрутизаторы.

Answer 1

Вкладки имеет опору и значение

value={this.state.value} 
onChange={this.handleChange} 

так что вам нужно присвоить значение для всех вкладок:

<Tab label="Tags" value="tags" > 

и тогда ваша функция handlechange будет просто переключиться на какую вкладку вы хотите.

Answer 2

Вы можете прочитать с material-ui сайта