React.js에서 페이지 매김을 만드는 방법 다시 시작, 이전, 다음

블로그 게시물: React에서 간단한 슬라이드 탐색 구성 요소 구축

이 게시물에서는 React에서 기본 슬라이드 탐색 구성 요소를 만드는 방법을 살펴보겠습니다. 이 구성 요소를 사용하면 사용자는 "다시 시작", "이전" 및 "다음" 버튼을 사용하여 일련의 슬라이드를 탐색할 수 있습니다. React의 useState 후크를 사용하여 현재 슬라이드 인덱스를 관리하고 적절한 경우(예: 슬라이드 데크의 시작 또는 끝에서) 버튼이 비활성화되었는지 확인합니다.

강령 개요

Slides 구성요소는 소품으로 슬라이드 배열을 받습니다. 각 슬라이드에는 제목과 일부 텍스트가 포함되어 있습니다. 탐색 버튼을 사용하면 슬라이드에서 앞뒤로 이동할 수 있으며, '다시 시작' 버튼을 사용하면 첫 번째 슬라이드로 돌아갈 수 있습니다.

useState를 사용하여 상태 관리

useState 후크를 사용하여 현재 슬라이드 인덱스를 관리합니다.

const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

이 상태는 현재 표시된 슬라이드를 추적합니다. 슬라이드 0에서 시작하여 사용자가 "이전", "다음" 또는 "다시 시작" 버튼을 클릭하면 이 값을 업데이트합니다.

버튼 클릭 처리

각 버튼의 동작을 처리하는 세 가지 기능을 정의합니다.

1. 다시 시작 버튼: 현재 슬라이드 인덱스를 0으로 재설정하여 사용자를 첫 번째 슬라이드로 되돌립니다.

const handleRestart = () => {
  setCurrentSlideIndex(0);
};

1. 이전 버튼: 슬라이드 색인을 1씩 줄이지만 0(첫 번째 슬라이드) 아래로 내려가지 않도록 합니다.

const handlePrev = () => {
  setCurrentSlideIndex((prevIndex) => Math.max(prevIndex - 1, 0));
};

1. 다음 버튼: 슬라이드 색인을 1씩 늘리지만 마지막 슬라이드를 넘지 않도록 합니다.

const handleNext = () => {
  setCurrentSlideIndex((prevIndex) => Math.min(prevIndex + 1, slides.length - 1));
};

버튼 비활성화

사용자가 첫 번째 슬라이드를 볼 때 "이전" 및 "다시 시작" 버튼을 비활성화하고, 마지막 슬라이드를 볼 때 "다음" 버튼을 비활성화합니다.

<button
  data-testid="button-restart"
  onClick={handleRestart}
  disabled={currentSlideIndex === 0}
>
  Restart
</button>

<button
  data-testid="button-prev"
  onClick={handlePrev}
  disabled={currentSlideIndex === 0}
>
  Prev
</button>

<button
  data-testid="button-next"
  onClick={handleNext}
  disabled={currentSlideIndex === slides.length - 1}
>
  Next
</button>

슬라이드 콘텐츠 렌더링

구성 요소는 currentSlideIndex 상태를 사용하여 현재 슬라이드의 제목과 텍스트를 렌더링합니다.

<div>



<h4>
  
  
  결론
</h4>

<p>이 간단하면서도 효과적인 슬라이드 탐색 구성 요소는 UI 상태 관리를 위한 React의 useState의 강력한 기능을 보여줍니다. 동적 상태 및 이벤트 처리를 사용하여 사용자가 사용자 친화적인 방식으로 슬라이드와 상호 작용할 수 있는 유연한 구성 요소를 만들었습니다. 애니메이션이나 자동 슬라이드 전환과 같은 기능을 추가하여 이 구성요소를 확장할 수 있습니다.</p>


          

            
        

위 내용은 React.js에서 페이지 매김을 만드는 방법 다시 시작, 이전, 다음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!