Buttonコンポーネントを特定の条件でのみ表示する【React.js】

今現在、ラーメン屋のサイトを作ろうとReactを勉強していて、海外のyoutubeを見ながらサイトを作っています。

そこで、サイトを模写している中で、Buttonコンポーネントを特定の条件下でのみナビゲーションバー表示させる方法が複雑だったので、紹介したいと思います。

今回の内容
・Buttonコンポーネントの作成
・Buttonコンポーネントの表示

今回はこんな感じでやっていきたいと思います。

今回の内容

Buttonコンポーネントの作成

まずは特定の条件の時にCSSを更新するためのButtonコンポーネントを作成します。

import React from 'react'
import './Button.css';
import { Link } from 'react-router-dom';

const STYLES = ['btn--primary', 'btn--outline'];

const SIZES = ['btn--medium', 'btn--large'];

export const Button = ({
  children, 
  type, 
  onClick,
  buttonStyle,
  buttonSize
}) => {


return (
  <Link to='/sign-up' className='btn-mobile'>
    <button
    className={`btn ＄{checkButtonStyle} ＄{checkButtonSize}`}
      onClick={onClick}
      type={type}>
      {children}
    </button>
  </Link>
);
};

export default Button;

まずは、上から理解していきます。

const STYLES = ['btn--primary', 'btn--outline'];

const SIZES = ['btn--medium', 'btn--large'];

こちらでは、STYLESとSIZESの配列を作成しておきます。こちらはあとで使います。

配列については下記を参照。

jsprimer.net

配列 · JavaScript Primer #jsprimer

https://jsprimer.net/basic/array/

配列は値を順番に格納できるオブジェクトです。この配列の作成、更新、削除などの基本的な操作や実際に使い方についてを紹介します。また配列における破壊的なメソッドと非破壊的メソッドの違いについても紹介します。

export const Buttonでは、関数コンポーネントでButtonを定義します。関数コンポーネントは下記を参照しました。

ja.reactjs.org

ステートフックの利用法 – React

https://ja.reactjs.org/docs/hooks-state.html

ユーザインターフェース構築のための JavaScript ライブラリ

引数に({ children, type, onClick, buttonStyle, buttonSize }) を入れます。

const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle : STYLES[0];

const checkButtonSize = SIZES.includes(buttonSize)
? buttonSize : SIZES[0];

以上のコードの説明をします。よく理解できていないので、詳しくは説明できていないかもしれないです。

const checkButtonStyleでは変数を定義していきます。

先ほど定義したSTYLESの中で、buttonStyleが含まれている場合は、buttonStyleをそのまま実行し、buttonStyleが含まれていない場合は、STYLESの最初の部分を実行する、という式です。

つまり、buttonStyleがなければデフォルトで'btn--primary' が渡されるということですね。

 <Button
className='btns' 
buttonStyle='btn--primary' 
buttonSize='btn--large'>
WATCH <i className='far fa-play-circle' />
</Button>

上記ではbuttonStyleとbuttonSizeが渡されているので、指定されたクラスのCSSが表示されます。

もしbuttonSizeとbuttonStyleが渡されなければ、デフォルトでbtn--primaryとbtn--mediumが適用されます。

上記のボタンでは、WATCHがprimaryで左のMENUがoutlineが適用されています。

このようにbuttonStyleとbuttonSizeを定義してあげることで、条件によってクラスCSS分けることができます。

それでは処理の方を見ていきます。

return (
  <Link to='/menu' className='btn-mobile'>
    <button
    className={`btn ＄{checkButtonStyle} ＄{checkButtonSize}`}
      onClick={onClick}
      type={type}>
      {children}
    </button>
  </Link>

これでlinkタグを使い、クリックしたときのリンク先とクラス名を定義しています。

そしてそのあとは、onClickとtypeをそれぞれ引数を代入します。他のファイルでonClickとtypeが渡されれば、Buttonの引数に渡されて実行されるというイメージですかね。多分そんな感じです。

そして{ children }では、下記のように引数が渡されます。

<Button>ここに入るのが{children}に渡される</Button>

これでButtonコンポーネントの作成は完了です。

それでは、どのようにして表示させていくのかを見ていきます。

Buttonコンポーネントの表示


import React,{useState, useEffect} from 'react'
import { Link } from 'react-router-dom';
import './Navbar.css';
import { Button } from './Button';

function Navbar() {
  const [click, setClick] = useState(false);
  const [button, setButton] = useState(true);

  const handleClick = () =>  setClick(!click);
  const closeMobileMenu = () => setClick(false);

  const showButton = () =>{
    if(window.innerWidth <= 960){
      setButton(false)
    }else{
      setButton(true);
    }
  };

  useEffect(() => {
    showButton();
  }, []);

  window.addEventListener('resize', showButton);

  return (
    <>
    <nav className="navbar">
      <div className="navbar-container">
        <Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
          ISSEI <i className="fab fa-typo3" />　
        </Link>
        <div className="menu-icon"　onClick={handleClick}>
          <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
        </div>
        <ul className={click ? 'nav-menu active': 'nav-menu'}>
          //省略
        </ul>
        {button && <Button buttonStyle='btn--outline'>SIGN UP</Button>}
      </div>
      </nav>
    </>
  );
}

export default Navbar;

上のコードはナビゲーションバーのコードです。

このコードだと下記のように表示されます。

それではコードについて理解していきます。

注目するのは以下のコードです。

const [button, setButton] = useState(true);　//state変数buttonを定義

//画面の大きさによってbuttonを表示・非表示にする
  const showButton = () =>{
    if(window.innerWidth <= 960){
      setButton(false)
    }else{
      setButton(true);
    }
  };

//showButton変数をレンダーごとに呼び出す
  useEffect(() => {
    showButton();
  }, []);

//サイズが変更するイベントがあるごとにshowButtonを実行させる
  window.addEventListener('resize', showButton);

//state変数のボタンbuttonがtrueの時にButtonコンポーネントが呼び出されるようになる
{button && <Button buttonStyle='btn--outline'>SIGN UP</Button>}

まずはstate変数を定義します。

showButton変数で、画面の大きさが変化するとsetButtonが変更し、buttonの値が変化します。

ステートフックについての理解は下記を参照。

ja.reactjs.org