Reactを使ってBulmaのTabsを切り替える

概要

Vue.jsを使ってBULMAのtabsを切り替える
この記事を参考にして頂きました。

記事ではVueを使っていますが、今回はReactを使って書いていきます。

コード

App.js

import React, {useState} from "react";
import { Link } from "react-router-dom";

function App() {
    const [active, setActive] = useState('pictures');

    return (
        <div className="tabs">
            <ul>
                <li className={active === 'pictures' && 'is-active'}><a onClick = {() => setActive('pictures')}>Pictures</a></li>
                <li className={active === 'music' && 'is-active'}><a onClick = {() => setActive('music')}>Music</a></li>
                <li className={active === 'videos' && 'is-active'}><a onClick = {() => setActive('videos')}>Videos</a></li>
                <li className={active === 'documents' && 'is-active'}><a onClick = {() => setActive('documents')}>Documents</a></li>
            </ul>
        </div>
    );
  }

  export default App;

説明

state変数のactiveはどのTabを強調するか表しています。そして，clickイベントが起こった時、useStateでstate変数を変更しています。リロードしたとき、activeがpicturesになるので、その時はuseEffectなどで対処しましょう。また、aタグをreact-router-domのLinkタグに変えることもできます。

以下のURLはコードのTabsを実装したものです
https://exampletab.netlify.app/