実は初めて反応に触れた時に使うべきものは時間がないので元気がない

チームプロジェクトで作成したナビゲーションの例を再書き込みします.

useState

公式文書説明文(何を言っているのか見てもわかる裏地)
これは反応の代表的なHookが最初に学んだHookですこれは、関数ベースのステータス管理に基づいて作成されます.
ナビゲーションバーは、次の機能を実装します.
1.製品カテゴリボタンで下部サブメニューをポップアップ
2.下位カテゴリのメニューデータを読み込む

00.ファイルの構成

Navという名前のフォルダには多くのコンポーネントがあります.

Nav.js

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Header } from './Header';
import { faBars, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';

import { NavDepth2 } from './NavDepth2.js';
import './Nav.scss';

const Nav = () => {
  let [clicked, setClicked] = useState(false);
  function handleCategory(e) {
    !clicked ? setClicked(true) : setClicked(false);
  }

  return (
    <nav className="nav-wrap">
      <div className="content-wrap">
        <Header />
        <div className="nav">
          <ul className="nav-depth1">
            <li className="nav-category" onClick={handleCategory}>
              <FontAwesomeIcon icon={faBars} className="menu-bar" />
              <span>제품카테고리</span>
            </li>
            <li>
              <Link to="/products/new">신상품</Link>
            </li>
            <li>
              <Link to="/products/best">베스트</Link>
            </li>
            <li>
              <Link to="/products/best">봄,들이기</Link>
            </li>
            <li>
              <Link to="/products/best">위코뷰 스타일링</Link>
            </li>
            <li>
              <Link to="/products/best">기획전</Link>
            </li>
          </ul>
          <div className="search-section">
            <input type="text" className="search-input" />
            <button className="search-btn">
              <FontAwesomeIcon icon={faMagnifyingGlass} />
            </button>
          </div>
        </div>
      </div>
      <NavDepth2 show={clicked} />
    </nav>
  );
};

export default Nav;

長いです.

01. import

まずHookを使うにはimportでHookを引き寄せるのが一番です

//1. 리액트 훅 사용
import React, { useState, useEffect } from 'react'; 
//2. 리액트 라우터 돔에서 Link 컴포넌트 사용
import { Link } from 'react-router-dom';
//3. fontawesome 아이콘을 사용하기 위해 끌어온 것들
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';

//커스텀 컴포넌트 header(로고 있는 쪽)
import { Header } from './Header';
//커스텀 컴포넌트 NavDepth2(제품 카테고리 누르면 나오는 부분)
import { NavDepth2 } from './NavDepth2.js';
//css 연결
import './Nav.scss';

02.イベントと関数宣言

「製品カテゴリ」メニューをクリックして、NavDepth2イベントを「製品カテゴリ」ボタンに掛けます.これは、コンポーネントの「作成」および「消去」であるためです.

<li className="nav-category" onClick={handleCategory}>
      <FontAwesomeIcon icon={faBars} className="menu-bar" />
      <span>제품카테고리</span>
</li>

では、私onClick関数はどんな役割ですか...

function handleCategory(e) {
    !clicked ? setClicked(true) : setClicked(false);
  }

パラメータとしてイベント(総称してhandleCategory)を受信するが、実際には、この関数には具体的なイベントはない.消さなきゃ
それを解くとこうなる

if(!clicked){
  	setClicked(true);
}else{
	setClicked(false);
}

eの結果が偽の場合、clicked関数にtrueまたはfalse値を提供するのは非常に簡単な条件です.では、そのsetClickedとsetClickedは何をしているのでしょうか.

03.Stateの使用

let [clicked, setClicked] = useState(false);

なじみのない文法が現れた.useStateのデフォルトフォーム.
まず、配列には変数と関数が含まれます.
1.clickedは記憶状態の変数(すなわちclicked)である
2.let clicked;はステータスを更新するための関数です.

function setClicked(){
	(무언가의 과정을 거쳐 clicked의 상태가 갱신되는 코드)
   
	return clicked
}

setClickedhookが実行されます.括弧内の部分は初期値、すなわちuseStateの初期状態はfalseである.

let clicked = false;

USStateはclickedという関数を1つだけ宣言した.
このsetClickedまたは入力値を呼び出す動作は、先ほど書き込まれたsetClicked関数で行います.

usState声明

状態値を管理する変数

ステータス値を更新する関数

状態値を管理する変数の初期値
発表されます.

操作する要素にイベントハンドルを掛けます.(onClick)

イベントハンドラが保留中の要素でイベントが発生した場合、イベントハンドラ内部の関数が実行されます.( handleCategory )

setClicked(false) 가 되거나 setClicked(true)가 되거나の結果、setClickedの値が変更されます.
たぶんそう理解中
終わりましたか?いいえ.

04.変数値を他の素子に渡す

これで、clickedクラスの要素をクリックすると、.nav-categoryの値はtrueまたはfalseになります.clickedの要素は、消失または消失しなければならない.

<NavDepth2 show={clicked} />

NavDepth2は、NavDepth2という任意のProperties、すなわちpropsを有する.showpropertyという名前の値にshowの値を加えます.
では、clickedの長さを見てみましょう.

NavDepth2.js

import { useState, useEffect } from 'react';
import { MenuLink, ProductLink } from './Links.js';

const NavDepth2 = show => {
  const [pageCategory, setPageCategory] = useState([]);
  const [sub1Category, setSub1Category] = useState([]);

  useEffect(() => {
    fetch('./data/pageCategoryData.json', { method: 'GET' })
      .then(res => res.json())
      .then(data => {
        setPageCategory(data);
      });
    fetch('./data/sub1CategoryData.json', { method: 'GET' })
      .then(res => res.json())
      .then(data => {
        setSub1Category(data);
      });
  }, []);

  return (
    <div className={`nav-depth2 ${!show.show ? 'nav-disable' : ''}`}>
      <div className="content-wrap">
        <ul className="nav-depth3">
          {pageCategory.map(list => (
            <MenuLink key={list.id} list={list} />
          ))}
        </ul>

        {sub1Category.map(list => (
          <ProductLink key={list.sub1_id} list={list} />
        ))}
      </div>
    </div>
  );
};

export { NavDepth2 };

まだたくさんある今はこの部分だけ見て

05. className toggle

<div className={`nav-depth2 ${!show.show ? 'nav-disable' : ''}`}>
.
.
</div>

NavDepth2コンポーネントはNavDepth2というクラスdiv要素に囲まれています.nav-depth2を複数のクラスに取り外して貼り付けた可能性があります.
要するにクラス名を切り替える
ここでconsoleをパラメータとして.nav-depth2を出力すると、出力結果は簡単です.

Show:{show:false}
//들어온 인자 show: {Navdepth2의 props show : clicked의 값}

これが上の3つの演算子がnav-disableと書かれている理由です.
いずれにしても、この値はtrueかfalseであるため、条件をshowと書くだけで、trueかfalseかを決定することができる.show.showの値が!show.showの場合、
=> show.show falseの値が<div className= "nav-depth2 nav-disable" >の場合、
=> show.showこのような簡単な操作により,カテゴリメニューの切り替えを実現した.
アニメがなければ.
ここにドロップダウンアニメーションがあると、もっと難しくなるかもしれません.

の最後の部分

この場合、ユーザーステータスは、ステータス変更の構成部品を管理するために使用できます.
次に、NavDepth 2に示すように、usStateとuseEffectを使用してデータを管理するプロセスを記録します.