목록 회로, useArray 후크

그래서 최근에 두 개의 화살표를 사용하여 목록을 순환하는 반응 구성 요소를 만들어야 했습니다. 여기서 캐치는 다음 화살표는 끝에 도달한 후 첫 번째 인덱스로 돌아가야 하고 이전 화살표는 마지막 항목에 도달하면 첫 번째 항목으로 이동해야 합니다.

이것은 반응하고 후크를 사용하여 다음과 같은 결과를 얻었습니다.

// useArrayNavigator.js
import { useState } from 'react';

export function useArrayNavigator(arrayLength) {
  const [currentIndex, setCurrentIndex] = useState(0);

  const previousIndex = () => {
    const index = currentIndex === 0 ? arrayLength - 1 : currentIndex - 1;
    setCurrentIndex(index);
  };

  const nextIndex = () => {
    const index = currentIndex === arrayLength - 1 ? 0 : currentIndex + 1;
    setCurrentIndex(index);
  };

  return { currentIndex, previousIndex, nextIndex };
}

구성 요소에서 사용하려면 다음을 수행하십시오.

// widget.js
const Widget = ({ array }) => {
  const { currentIndex, nextIndex, previousIndex } = useArrayNavigator(array.length);

  return (
    <div>
      <span className="text-lg">Top in {array[currentIndex].label}</span>
      <span>
        <button onClick={previousIndex} />
        <button onClick={nextIndex} />
      </span>
    </div>
  );
};

결과는 다음과 같습니다.


어떻게 목록을 계속 살펴볼 수 있는지 확인하십시오.

다음 시간까지!