[REACTJS] 반작용과 scrollspy을 구현하는 방법

반작용과 scrollspy을 구현하는 방법

해결법

1. ---

   1.CONST {useState, useEffect, useCallback, useRef} = 반작용; / ** * * @param {} 개체 scrollParent [스크롤 부재의 DOM 노드] * @param {배열} _targetElements [노드의 배열에 스파이] * / CONST spyScroll = (scrollParent, _targetElements) => { (! scrollParent) 반환 false의 경우; // 데이터 이름의 속성이 모두 아이들과 함께 객체를 생성 CONST targetElements = _targetElements || ... scrollParent.children] .reduce ( (맵 항목) => item.dataset.name? {[item.dataset.name은] : 항목, ...지도} :지도, {} ); 베스트 매치를 = {}하자; (targetElements에 CONST sectionName) {대 경우 (Object.prototype.hasOwnProperty.call (targetElements, sectionName)) { CONST domElm = targetElements [sectionName]; CONST 델타 = Math.abs (scrollParent.scrollTop - domElm.offsetTop); 계정에 위에서 // 체크 거리, takig 스크롤 만약 (! bestMatch.sectionName) 베스트 매치 = {sectionName 델타}; // 어떤 delet 검사는 "0"에 가장 가까운 경우 (델타 { CONST [currentSection, setCurrentSection = useState (); // prever으로 상위 컴포넌트 때 재 렌더링이 상위 성분이 성분 내부 스크롤 이벤트 리스너를 추가하고, NOT // 스크롤 리스너는 눈에 띄는 지연이 발생하는 해고되고 상태가 업데이트됩니다. useEffect (() => { CONST wrapperElm = sectionsWrapperRef.current; 경우 (wrapperElm) { wrapperElm.addEventListener ( '스크롤', E => setCurrentSection (spyScroll (e.target))); setCurrentSection (spyScroll (wrapperElm)); } // 바인딩을 해제 창 () => wrapperElm.removeEventListener ( '스크롤'throttledOnScroll) }, []); 반환 어린이 ({currentSection}); }; 애플리케이션 기능 () { CONST sectionsWrapperRef useRef = () 리턴 {({} currentSection) =>

   <섹션 데이터 NAME = "절-A" 클래스 이름 = {currentSection === "섹션-A ​​'? '활성': ''} > 부분은 <섹션 데이터 NAME = "절-B" 클래스 이름 = {currentSection === "절-B?" '활성': ''} > 섹션 B <섹션 데이터 NAME = "절-C" 클래스 이름 = {currentSection === "섹션-C"? '활성': ''} > 섹션 C } } ReactDOM.render ( <애플리케이션 /> document.getElementById를 ( '루트') ) HTML, 본문 #root {높이 : 95 %; 오버 플로우 : 숨겨진; } #root> DIV { 패딩 바닥 : 20em; 신장 : 100 %; 오버 플로우 : 자동; 상자 크기 조정 : 국경 상자; } 부분{ 높이 : 50vh; 국경 바닥 : 1 픽셀의 빨간색으로; } section.active {배경 : lightyellow; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/react/16.10.0/umd/react.production.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.0/umd/react-dom.production.min.js">

   CONST {useState, useEffect, useCallback, useRef} = 반작용; / ** * * @param {} 개체 scrollParent [스크롤 부재의 DOM 노드] * @param {배열} _targetElements [노드의 배열에 스파이] * / CONST spyScroll = (scrollParent, _targetElements) => { (! scrollParent) 반환 false의 경우; // 데이터 이름의 속성이 모두 아이들과 함께 객체를 생성 CONST targetElements = _targetElements || ... scrollParent.children] .reduce ( (맵 항목) => item.dataset.name? {[item.dataset.name은] : 항목, ...지도} :지도, {} ); 베스트 매치를 = {}하자; (targetElements에 CONST sectionName) {대 경우 (Object.prototype.hasOwnProperty.call (targetElements, sectionName)) { CONST domElm = targetElements [sectionName]; CONST 델타 = Math.abs (scrollParent.scrollTop - domElm.offsetTop); 계정에 위에서 // 체크 거리, takig 스크롤 만약 (! bestMatch.sectionName) 베스트 매치 = {sectionName 델타}; // 어떤 delet 검사는 "0"에 가장 가까운 경우 (델타 { CONST [currentSection, setCurrentSection = useState (); // prever으로 상위 컴포넌트 때 재 렌더링이 상위 성분이 성분 내부 스크롤 이벤트 리스너를 추가하고, NOT // 스크롤 리스너는 눈에 띄는 지연이 발생하는 해고되고 상태가 업데이트됩니다. useEffect (() => { CONST wrapperElm = sectionsWrapperRef.current; 경우 (wrapperElm) { wrapperElm.addEventListener ( '스크롤', E => setCurrentSection (spyScroll (e.target))); setCurrentSection (spyScroll (wrapperElm)); } // 바인딩을 해제 창 () => wrapperElm.removeEventListener ( '스크롤'throttledOnScroll) }, []); 반환 어린이 ({currentSection}); }; 애플리케이션 기능 () { CONST sectionsWrapperRef useRef = () 리턴 {({} currentSection) =>

   <섹션 데이터 NAME = "절-A" 클래스 이름 = {currentSection === "섹션-A ​​'? '활성': ''} > 부분은 <섹션 데이터 NAME = "절-B" 클래스 이름 = {currentSection === "절-B?" '활성': ''} > 섹션 B <섹션 데이터 NAME = "절-C" 클래스 이름 = {currentSection === "섹션-C"? '활성': ''} > 섹션 C } } ReactDOM.render ( <애플리케이션 /> document.getElementById를 ( '루트') ) HTML, 본문 #root {높이 : 95 %; 오버 플로우 : 숨겨진; } #root> DIV { 패딩 바닥 : 20em; 신장 : 100 %; 오버 플로우 : 자동; 상자 크기 조정 : 국경 상자; } 부분{ 높이 : 50vh; 국경 바닥 : 1 픽셀의 빨간색으로; } section.active {배경 : lightyellow; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/react/16.10.0/umd/react.production.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.0/umd/react-dom.production.min.js">

   이 사용자의 의도에 의미하기 때문에 스크롤 방향, 문제 않기 때문에 그것은 완벽 아니에요.

2. ---

   2.당신은 반작용-scrollspy 사용할 수 있습니다. 이 자식의 repo 반응-scrollspy를 방문하십시오.

   당신은 반작용-scrollspy 사용할 수 있습니다. 이 자식의 repo 반응-scrollspy를 방문하십시오.

3. ---

   3.'반응-scrollspy-탐색'의 사용 NPM을 시도하고 그 문서를 따르십시오. 링크

   '반응-scrollspy-탐색'의 사용 NPM을 시도하고 그 문서를 따르십시오. 링크

4. ---

   4.https://codesandbox.io/s/gallant-wing-ue2ks

   https://codesandbox.io/s/gallant-wing-ue2ks

   npm i react-scrollspy
   

   yarn add react-scrollspy
   

   <section id="section-1">
       <!-- Content goes here -->
   </section>
   <section id="section-2">
       <!-- Content goes here -->
   </section>
   
   <!-- .... -->
   
   <section id="section-n">
       <!-- Content goes here -->
   </section>
   

   <Scrollspy items={ ['section-1', 'section-2', ..., 'section-n'] } />
   

   이 문서 https://makotot.github.io/react-scrollspy/#section-3 확인

from https://stackoverflow.com/questions/48966691/how-to-implement-a-scrollspy-with-react by cc-by-sa and MIT license