react-tabsで選択中のタブの下にborderで切り替えを表現したい

Question

タイトルの通り、react-tabsを使って、以下の画像のようにタブの下にborder-bottomで、「現在はこのタブを表示している」と表現したいと考えています。
JavaScriptの場合はclickしたら要素にclassを追加・削除すれば良いとかと思いますが、React.jsの場合は、どうCSSを適応させるべきでしょうか。

Answer 1

こんにちは

以下は、reactjs/react-tabs#controlled-mode のサンプルです。

import React, { Component } from 'react'
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
import 'react-tabs/style/react-tabs.css'

class App extends Component {
  constructor() {
    super();
    this.state = { tabIndex: 0 };
  }
  render() {
    return (
      <Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
        <TabList>
          <Tab>Title 1</Tab>
          <Tab>Title 2</Tab>
        </TabList>
        <TabPanel></TabPanel>
        <TabPanel></TabPanel>
      </Tabs>
    );
  }
}

export default App

上記をマウントして表示させると、以下のようになります。

選択されているタブのタイトルに下線を引くには、たとえば以下のようにします。

import React, { Component } from 'react'
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
import 'react-tabs/style/react-tabs.css'

const underline = { borderBottom: 'solid 2px #00f' }

class App extends Component {
  constructor() {
    super()
    this.state = { tabIndex: 0 }
  }
  render() {
    return (
      <Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
        <TabList>
          <Tab><div style={this.state.tabIndex === 0 ? underline : null}>Title 1</div></Tab>
          <Tab><div style={this.state.tabIndex === 1 ? underline : null}>Title 2</div></Tab>
        </TabList>
        <TabPanel></TabPanel>
        <TabPanel></TabPanel>
      </Tabs>
    )
  }
}

export default App

上記の修正により、以下のように表示されるようになります。

以上、参考になされば幸いです。