220331

👩🏻‍💻 Learn

@types

タイプ・スクリプト・ベースのライブラリをダウンロードします.vscodeのタイプエラーを防止できます.ダウンロードするモジュール名の前に@typesを付けてください.サポートされているかどうかはDocsをお読みください!yarn add @types/react-slick --dev

--dev

開発サーバでのみ使用するモジュールをダウンロードするためのCILdependenciesブラウザに必要なモジュールdevDependenciesサーバの開発に必要なモジュールのみyarn install --production依存項目のコマンドのみをインストール

Pagination

ページ番号は、ページ番号を利用してページを移動する方法です.
ページングに必要な準備内容

ページング素子

アプリケーション

のページング要素

ページコンポーネント

もちろん、1つの構成部品ページで作成することもできますが、ページ名を作成する目的は他のページでインポートするために使用されるため、単独で作成することが望ましいです.
上記の構成部品リストをそれぞれページング、board、indexとして定義する場合、必要な内容は次のとおりです.

pagination

ページを移動するためのonClickイベント関数(現在のページ番号、前のページ、次のページ)

.

ページ番号の関数(new Array(n)を受信して表示する.fill(1).map(,index)

を使用

board

ページ移動時に表示されるfetch UI

index

表示するデータの問合せ文

useQueryを使用してsetState

をpropsに移行

昇格state

サブコンポーネントのstate、setStateを親コンポーネントに移動し、複数のサブコンポーネントがstateを使用できるようにします.親構成部品にステータスを割り当てた後、子構成部品に渡します.
親コンポーネントに割り当てられたstateをサブコンポーネントとして使用するには、2つの方法があります.
全

実行関数

をスキップ

setState値

を超える

export default function Parents() {
  const [count, setCount] = useState(0);

  // 방법1 : 실행 함수 전체 넘기기
  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
     					// 방법2 : setCount 값 넘기기
      <Child1 count={count} setCount={setCount} />
      <div> =============================== </div>
      <Child2 count={count} onClickCountUp={onClickCountUp} />
    </div>
  );
}

📝 Review

今日はウェブナビゲーションに時間がかかりました.理解できない奇跡を経験したページ番号は単独で整理したほうがいいです.
今日のクイズは本当に簡単な内容でしたがうまく使えなかったので時間を無駄にしました前のページ/次のページがない場合はボタンを無効にし、バカのようにonClick関数を与えます.だからアプリケーションがおかしくなる...isActiveを直接タグ付けして3つの演算子を使えば良いのですが、いずれもonClick関数のif条件文でクリックしないとイベントが起こらないので悩んでしまいました.
私はantdから持ってきたアイコンに色を変えて、無効/アクティブに変化させたいです.ボタンに障害を加える方法を見るまで、私はやっと気づいた.私は馬鹿なことをしています.

🔥 Will

プロジェクトの進度は

に遅れない.

フォーラムテーマ

を考える