상태와 동작을 사용하지 않고 두 반응 구성 요소의 스크롤을 동기화하십시오.

Question

React에서 두 개의 다른 구성 요소의 스크롤을 동기화하려고합니다. 그래서 한 구성 요소에서 하나를 스크롤하면 다른 구성 요소도 스크롤됩니다. 두 가지 비율이 서로 다르기 때문에 매번 오프셋을 계산해야합니다.

모든 마우스 스크롤을 다시 렌더링하기 때문에 성능이 저하되므로 상태 및 동작 (필자는 redux를 사용하고 있습니다.)을 사용하고 싶지 않습니다 (또한 디 바운싱/스로틀 링 시도).

class Wrapper extends React.Component { 
    render() { 
    return (
     <div> 
     <FirstComponent /> 
     <SecondComponent /> 
     </div> 
    ); 
    } 
} 

내가 ref을 사용하려고하지만 사용자 정의 구성 요소 (내가 undefined를 얻을)에서 작동하지 않습니다와 어떤 경우에이 모든 외모 :

나는 두 개의 다른과 같이 구성 요소를 렌더링하는 래퍼 구성 요소가 react/redux에 대한 반 패턴처럼.

성과를 해치지 않고 가능한 한 React/Redux 패턴에 가까이 있지 않고 어떻게 달성 할 수 있는지에 대한 제안이 있으십니까?

Answer 1

불행히도 React는 ref를 넘어선 DOM 조작에 대한 좋은 해결책이 아니며 각 이벤트가 끝나면 다시 렌더링하지 않기를 바랄 것입니다.

ref을 사용하면 마운트가 발생할 때까지 undefined을 반환 할 수 있으므로, 아직 존재하지 않는 상황을 간단히 처리해야합니다.