「React」スライドAPIを使用せずにスライドを実装

これを作った時に何度も折れそうになりました私はあなたを爱して私のMacBook...

slide APIに依存することはできません。

そうですが、今週は本当のSlide APIの大切さを感じました.(もちろん、3日間)
理論的にはいつも完璧なコードですが、npm startとリフレッシュは初めてです.エラーは恐ろしいものではありません.もしこの問題が解決したら、次はどうやって論理に接続しますか?これが一番大きいようです(臆病者)
突然、成長するところがたくさんあるようです.
?

まずuserefを使用し、次にuserStateとuserEffectを一度に使用することが最大です.どのhookにもどのような利点があり、どのように使うべきか、明確な概念がなく、歩くときにコードを書くことがますます迷い、転換点を持ってゆっくりとやり直す機会が最大の成長点のようだ.

では、私の好きなものを大々的に出して、耻ずかしいコードを見に行きましょう。

1.キャプチャ構造（論理）

うん.何から始めればいいのか考えていると、スライドAPIがない場合、スライドの基本機能を見ました.

秒ごとに

に自動的に移行

pagination

前のスライドの最初の機能

過去の洪都賢はこの3点を大きく実現することにし、1つずつゆっくり(?)体現しながら試合を行うことにした.
誰もがきちんとした計画を持っている.打たれる前に.
-マイケル・タイソン

2.スライドリストからディレクトリデータを取得する

[
  {
    "id": 1,
    "src": "../images/slide-img01.jpg",
    "text": "첫번째 슬라이드 버튼",
    "alt": "첫번째 슬라이드"
  },
  {
    "id": 2,
    "src": "../images/slide-img02.jpg",
    "text": "두번째 슬라이드 버튼",
    "alt": "두번째 슬라이드"
  },
  {
    "id": 3,
    "src": "../images/slide-img03.jpg",
    "text": "세번째 슬라이드 버튼",
    "alt": "세번째 슬라이드"
  },
  {
    "id": 4,
    "src": "../images/slide-img04.jpg",
    "text": "네번째 슬라이드 버튼",
    "alt": "네번째 슬라이드"
  },
  {
    "id": 5,
    "src": "../images/slide-img05.jpg",
    "text": "다섯번째 슬라이드 버튼",
    "alt": "다섯번째 슬라이드"
  }
]

合計5枚の画像スライドを実現するために,고유한 id값, 이미지 주소 src, 이미지 alt값, 버튼의 text 값をこっそり用意した.

3.画像スライド()ですべて表示

// Slide.js
import React from 'react';
import './slide.scss';

const Slide = ({ count, slideList, slideRef, handleSlider }) => {
  return (
    <>
      <ul ref={slideRef} className="slideWrap">
        {slideList.map(slide => (
          <li key={slide.id}>
            <img src={slide.src} alt={slide.alt} />
          </li>
        ))}
      </ul>
      <div className="inner">
        <div className="pagination">
          {slideList.map(button => (
            <button
              type="button"
              key={button.id}
              onClick={() => {
                handleSlider(button.id);
              }}
              className={button.id === count ? 'active' : ''}
            >
              {button.text}
            </button>
          ))}
        </div>
      </div>
    </>
  );
};

export default Slide;

このコンポーネントでは、スライドとページングが行われています.(分かち合いたかったけど、中には5行あったのははは…)
受信したネックデータは、親要素からpropsとしてslideListを受信し、mapに変換し、画像スライド部分にid、src、alt値を順次入れる.(本当です...alt値を必ず入れます...)
また、ページングもslideListにどれだけのデータを表示し、どれだけのデータを生成する必要があるかを示すため、slideListをmapにもう一度返す.これにより<Slide>素子の作成が完了する.
もう少しでULのUseRefを忘れそうになりました.参考にしてください.
昔洪都賢が簡単に整理したuseref

4.待望のMain構成部品スライドを使用する

難易度が最も高い
私はグーグルゲームをしたことがありません.しかし、他人が自尊心を守るためにするような行為はしたくないので、ゆっくり考えました.🧐
うん.
毎秒

を返します.

では、1秒ごとに造形費がかかります.

のようなデザインの価格はまだページを食べなければなりません.

1日からゆっくり始めましょう

4-1. setTimeout, clearTimeout

import React, { useEffect, useRef, useState } from 'react';

const Main = () => {
  const slideRef = useRef();
  const [count, setCount] = useState(1);
  const [slideList, setSlideList] = useState([]);

  useEffect(() => {
    const interval = setTimeout(() => {
      setCount(() => {
        if (count < slideList.length) {
          setCount(count + 1);
        } else {
          setCount(1);
        }
      });

      handleSlider(count);

      return () => clearTimeout(interval);
    }, 6000);
  });
  
  const handleSlider = count => {
    if (count === 5) {
      slideRef.current.style.transform = 'translateX(0)';
    } else {
      slideRef.current.style.transform = `translateX(-${
        window.innerWidth * count
      }px)`;
    }
  };
  
  return (
    <main className="main">
      <div className="mainSlide">
        <Slide
          slideRef={slideRef}
          count={count}
          slideList={slideList}
          handleCount={handleCount}
          handleSlider={handleSlider}
        />
      </div>
    </main>
  );
};

export default Main;

settimeoutで、私が設定した時間ごとにconst intervalの内容を繰り返します.6秒が適当だと思ったので、6000をあげて、中身を見てみました.
setCountを使用してcountロールを実行しているusStateを作成し、ある時点でcountが1に上昇するのではなく、数秒で1に上昇します.構文はuseEffectのif文で、スライドデータの長さ値に基づいて操作されます.
ではcountを確認して1に戻りますただしUSEffectでsettimeoutを使う場合は必ずcleartimeoutを使います.Intervalを終了しないとエラーは発生しませんが、障害のあるレイアウトが表示されます.必ず書きます

4-2. userefを使用してスタイル値を変更する

まずは最強サイダーを持ってきてくれたuserefに拍手しよう
ref={slideRef}をtranslateX値をuserRefに変換する必要がある<ul>に宣言し、パラメータ値を許容できるように関数に書きます.

  useEffect(() => {
    const interval = setTimeout(() => {
      setCount(() => {
        if (count < slideList.length) {
          setCount(count + 1);
        } else {
          setCount(1);
        }
      });

      handleSlider(count);

      return () => clearTimeout(interval);
    }, 6000);
  });

  const handleSlider = count => {
    if (count === 5) {
      slideRef.current.style.transform = 'translateX(0)';
    } else {
      slideRef.current.style.transform = `translateX(-${
        window.innerWidth * count
      }px)`;
    }
  };

handleSliderはcountをパラメータとして受け入れ、パラメータをパラメータとして使用し、sildefのoptionalを使用してstyleにアクセスし、私が変更しなければならない値はtranslate Xです.
値を直接入れてelse if()ゲートを用いて毒性の悪い作業を行うことができたが,Templete Literalを用いた.window.innerWidthを入れた理由は、レンダリング時の画面がノートパソコンだったり、デスクトップの4 kディスプレイだったりするからです.したがって,ウィンドウ画面の幅値とパラメータで得られたcountを乗算し,if文に書かれた厳密な比較count値に従ってcount値を5に変換してX(0)に変換する.
そして、最後に作成したこの関数を私のコードに溶かす方法......考えてみると、意外に答えが簡単でした.
先ほど作成したuseEffectの値はsettimeoutまで上昇しています.
上昇し続ける値をパラメータとしてHandleSliderに入れたら?
私の悩みはすべて解決できます.

ポスト

一番思いついたのはこれですか?そう思います.しかし、この点はすでに実現しており、自分が立てた目標も実現しているため、大きな助けとなっている.Googleゲームでは、他人のコードを理解できなくても、欲張ることでコードをコピーすることができます.しかし、今回私が感じた最大の点は、自分の考え通りにゆっくりとコードを書き、そこから得た知識と概念が次の機能の実現にも役立つことです.よく言いますが、基本功で一番大切だと思う人の一人は私でしょう.