React タブの切り替え

大枠

• stateで現在のタブを管理する（currentTab）
• stageで選択したタブを管理して、setStateで更新する
• 内容の部分に関しては、stateの内容に応じて出し分ける

まずは、選択する部分を作ってみる

これは現時点のTwitterのカテゴリーを参考にしています

cssを作成

# activeのクラスがついたら文字色が変わるようにしています

.header-tabs {
  display: flex;
  li{
    padding: 0 10px;
  }
  li.active {
    color: red;
  }
}

タブの部分を作成

import React from "react"


const TAB_TYPES = {  # 定数でタブの種類
を定義
  FOR_YOU: 'for_you',
  COVID_19: 'covid_19',
  TRANDING: 'tranding',
  NEWS: 'news'
}

const tabData = [  # typeと出力する値を配列で作成する
  {
    text: 'for_you',
    type: TAB_TYPES.FOR_YOU
  },
  {
    text: 'covid_19',
    type: TAB_TYPES.COVID_19
  },
  {
    text: 'tranding',
    type: TAB_TYPES.TRANDING
  },{
    text: 'news',
    type: TAB_TYPES.NEWS
  },
]

class Header extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentTab: TAB_TYPES.FOR_YOU  # 初期のタグタイプを設定
    }
  }

   render() {
     return(
       <div>
         <ul className="header-tabs">  # 
           {tabData.map((tab) => (<li className={this.state.currentTab == tab.type ? 'active' : ''}>{tab.text}</li>))}
         </ul>
       </div>
     )
   }
}

export default Header

内容も表示する

currentTabをfor_youにすれば、four_you

currentTabをtrandingにすれば、tranding

class Header extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentTab: TAB_TYPES.FOR_YOU
    }
  }

  renderContents() {
    let contents = null
    if (this.state.currentTab == 'for_you'){
      contents = <div>for_tou</div>
    } else if (this.state.currentTab == 'covid_19') {
      contents =  <div>covid_19</div>
    }else if (this.state.currentTab == 'tranding') {
      contents =  <div>tranding</div>
    }else if (this.state.currentTab == 'news') {
      contents =  <div>news</div>
    }
    return (contents)
  }

   render() {
     return(
       <div className="container">
         <ul className="header-tabs">
           {tabData.map((tab) => (<li className={this.state.currentTab == tab.type ? 'active' : ''}>{tab.text}</li>))}
         </ul>
         {this.renderContents()}
       </div>
     )
   }
}

後はタブがクリックされたら、currentTabを更新してあげれば良い onClickイベントに、タブのタイプを私てあげている

class Header extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentTab: TAB_TYPES.FOR_YOU
    }
  }

  handleTab(type) {
    this.setState({currentTab:type})
  }

  // 省略
   render() {
     return(
       <div className="container">
         <ul className="header-tabs">
           {tabData.map((tab) => (<li className={this.state.currentTab == tab.type ? 'active' : ''} onClick={() => this.handleTab(tab.type)}>{tab.text}</li>))}
         </ul>
         {this.renderContents()}
       </div>
     )
   }
}

参考記事

qiita.com