React를 사용하여 이미지 캐러셀 구성 요소 완성

이번에는 React를 사용하여 imagecarousel 컴포넌트를 완성하는 방법을 소개하겠습니다. React를 사용하여 Image Carousel 컴포넌트를 완성할 때의 주의사항은 무엇인지 살펴보겠습니다.

React를 사용하여 위의 기능을 구현합니다. 먼저 구성 요소를 나눕니다.

<SlideMS> <SlideM/>
 <SlideS/><SlideMS/>

SlideM 구성 요소는 항상 상태를 유지하는 China Picture 구성 요소를 나타냅니다. currentMIndex는 의 인덱스 값입니다. 현재 중국 사진 사진.
SlideS 구성 요소는 작은 그림 구성 요소를 나타내며 현재 작은 그림의 인덱스 값과 작은 그림의 현재 페이지 번호인 currentSIndex 및 currentSPage의 두 가지 상태를 유지해야 합니다.

외부 구성 요소 SlideMS는 다음과 같은 여러 매개 변수를 허용합니다. props:

<SlideMS     mediumImageArr={mediumImageArr}    eachMediumImgWidth = {616}    smallImageArr={smallImageArr}     eachSmallImgWidth = {82}/>, document.getElementById(&#39;js-img-slide&#39;));
SlideM、SlideS再从SlideMS中获取参数进行内部渲染。
<SlideM     mediumImageArr={mediumImageArr}    currentMIndex={currentMIndex}    eachMediumImgWidth = {eachMediumImgWidth}    callback={(index)=>{self.setSmallIndex(index)}} /><SlideS      smallImageArr={smallImageArr}      currentSIndex={currentSIndex}      eachSmallImgWidth={eachSmallImgWidth}      eachMediumImgWidth = {eachMediumImgWidth}      callback={(index)=>{self.setMediumIndex(index)}}/>

중간 이미지의 전환 버튼 을 클릭하면 이미지 오프셋이 계산된 다음 새 currentMIdex가 상위 구성 요소로 전달됩니다. 상위 구성 요소 setState는 currentMIndex가 변경되었음을 두 하위 구성 요소에 알립니다.

작은 이미지 구성요소에 관련된 계산 비교 이를 추출하는 방법은 여러 가지가 있습니다. 예를 들어, 중간 그림의 주어진 너비를 기준으로 페이지에 작은 그림의 수를 계산하고, 작은 그림의 총 개수를 계산합니다. 페이지에서 주어진 인덱스 값 등을 기반으로 작은 그림이 어느 페이지에 있는지 확인합니다.

작은 그림 구성 요소의 왼쪽 및 오른쪽 화살표를 클릭하면 그림의 오프셋을 계산한 다음(먼저 중간 그림에 작은 그림이 몇 개 있는지 계산) setState가 작은 그림의 현재SPage 값을 수정합니다. . 상위 구성 요소인 setState는 currentMIndex가 변경되었음을 두 개의 하위 구성 요소에 알립니다.

ComponentWillReceiveProps에서 새 값 변경을 수신한 후 중간 그림과 작은 그림 구성 요소는 각각 ResetState를 수행하고 구성 요소 내부의 상태를 업데이트하여 두 구성 요소 간의 연결을 실현합니다. 둘.소통.

위는 구현 아이디어입니다. 실제 응용 프로그램에서는 장면이 더 복잡합니다. 예를 들어 첫 번째 사진은 비디오를 재생해야 할 수 있으며, 중간 사진을 클릭하면 큰 사진 모드에서 회전식 화면으로 전환될 수 있습니다. 정상일 수 있으며, 대형 사진 모드를 끄면 중형 사진과 소형 사진이 방금 본 마지막 사진을 자동으로 찾습니다. 여기에는 약간 더 복잡한 작업이 포함되며 이를 기반으로 호환성이 수행되어야 합니다.

매우 당황스러운 점: 이미지 캐러셀 중 animation 효과는 여전히 jquery의 animate를 사용합니다.

위 내용은 React를 사용하여 이미지 캐러셀 구성 요소 완성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!