条件付きレンダリングを使用したタブナビゲーション

Question

reactjs条件付きレンダリングを使用してタブのコンテンツを読み込んでいます。私は正常に2つのタブのためにそれをやった。しかし、今私は、3つのタブのコンポーネントを読み込む必要があります。条件付きレンダリングを使用してそれを行うには？またはこれを行う正しい方法を条件付きでレンダリングしていますか？ 2つのタブ

class InternalGroupsPage extends Component { 
     constructor() { 
      super(); 

      this.state = { 
       showPostTab: true, 
      }; 

      this.state = { 
       showDetailsTab: false, 
      }; 

      this.post_tab = this.post_tab.bind(this); 
      this.detail_tab = this.detail_tab.bind(this); 

     } 

     componentDidMount() { 

      this.setState({ 
       showPostTab: true, 
      }); 

     } 

     post_tab() { 

      this.setState({ 
       showPostTab: true, 
       showDetailsTab: false, 
      }); 
     } 

     detail_tab() { 

      this.setState({ 
       showPostTab: false, 
       showDetailsTab: true, 
      }); 

     } 

     render() { 

      return (

       <div className="body_clr"> 

        <div className="group_page_header"> 

         <div className="group_page_header_tabs"> 

          <div className="tab_buttons_div"> 
           <a className="grp_tab_btns" onClick={this.post_tab}>Posts</a> 
           <a className="grp_tab_btns" onClick={this.detail_tab}>Details</a> 
          </div> 

         </div> 

        </div> 

        <div className=""> 

         {this.state.showPostTab ? <GroupPost/> : <GroupDetails/>} 

        </div> 

       </div> 

ため

コードは私が唯一の2つのタブを持っているので、ここではそれは大丈夫です。 3つのタブがある場合、どのように処理できますか？代わりboolを用いたその場合

Answer 1

、このようにそれを書き込み、タブを識別しrenderに対応する成分をswitchケースを使用するstringを使用：renderTab方法の使用switch case内部

<div className=""> 
    {this.renderTab()}       
</div> 

及びコンポーネントを返します。

renderTab(){ 

    switch(this.state.showPostTab){ 
     case 'A': return <A/>; 
     case 'B': return <B/>; 
     case 'C': return <C/>; 
    } 

} 

このようにすれば、n個のタブを処理することができます。

作業例を確認：

var Post =() => <div> Post </div>; 
 
var Detail =() => <div> Detail </div>; 
 
var XYZ =() => <div> XYZ </div>; 
 

 
class App extends React.Component{ 
 

 
    constructor(){ 
 
     super(); 
 
     this.state = {tabName: 'post'} 
 
    } 
 
    
 
    tabChange(tabName){ 
 
     this.setState({tabName}); 
 
    } 
 
    
 
    renderTab(){ 
 
     switch(this.state.tabName){ 
 
     case 'post': return <Post/> 
 
     case 'detail': return <Detail/> 
 
     case 'xyz': return <XYZ/> 
 
     } 
 
    } 
 
    
 
    render(){ 
 
     return(
 
     <div> 
 
      <div className="tab_buttons_div"> 
 
       <a className="grp_tab_btns" onClick={this.tabChange.bind(this,'post')}> Posts | </a> 
 
       <a className="grp_tab_btns" onClick={this.tabChange.bind(this,'detail')}> Details | </a> 
 
       <a className="grp_tab_btns" onClick={this.tabChange.bind(this,'xyz')}> XYZ </a> 
 
      </div> 
 
      {this.renderTab()} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App/>, 
 
    document.getElementById('app') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'>

Answer 2

ストアのような状態にあるタブのid、：その後のタブがアクティブのチェックをレンダリングし、レンダリング

this.state = { 
    tab: 'post', 
}; 

をそれに基づいて。このために、タブマッピングオブジェクトを作成することができます。

const tabs = { 
    post:() => <GroupPost />, 
    details:() => <GroupDetails />, 
}; 

const element = tabs[this.state.tab](); 
return <div>{element}</div>;