材料UIでタブコンテンツを動的に変更

Question

反応アプリケーションページにタブ（素材ui）を含むdivがあります。 2つのタブがあります。タブの1つにlistview（material-ui）があります。私は、リストビューのリストアイテムをクリックすると、そのタブコンテンツがリストビューをフェードアウト（または非表示または変更）し、別のビューを自分のタブに表示するような動作が必要になります。どのように私はこれを達成することができます。 "タグリスト"

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> 

"タブ成分" 成分

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

リストアイテム。 私は、タグリストのタグとしてタブリストを渡していることがわかります。私はlistitemをクリックするたびにこのビューを変更します。リスト項目をクリックするたびに、「タグリスト」 コンポーネントを別のコンポーネント「コンポーネント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> 

     ); 

リストアイテムをクリックするたびに、別のコンポーネントと交換したいと考えています。ここではルータが便利ですか？

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

してからhandlechange機能は、ちょうどあなたがしたい方のタブに切り替えます：

Answer 1

タブは小道具や価値

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

ので、あなたはすべてのあなたのタブに値を代入する必要があります。

Answer 2

material-uiウェブサイト