React 구성 요소의 렌더링 만 변경하는 방법

Question

Swiper이라는 구성 요소를 내보내는 react-id-swiper 라이브러리를 사용하고 싶습니다.

이

render() { 
    const { containerClass, wrapperClass, children, rtl } = this.props; 
    const rtlProp = rtl ? { dir: 'rtl' } : {}; 

    return (
     <div className={containerClass} {...rtlProp}> 
     {this.renderParallax()} 
     <div className={wrapperClass}> 
      {React.Children.map(children, this.renderContent)} 
     </div> 
     {this.renderPagination()} 
     {this.renderScrollBar()} 
     {this.renderNextButton()} 
     {this.renderPrevButton()} 
     </div> 
    ); 
    } 
} 

이 구성 요소가 완벽하게 내가합니다 (containerClass 요소의 외부) 외부 장소에 페이지 매김을 배치해야하는 것을 제외하고, 내 요구를 일치 : 이는 render 방법이다.

가능한 한 가지 해결책은 Swiper 클래스를 상속하고 변경하는 것입니다. render 메서드입니다. 그러나 페이스 북의 문서는 상속을 사용하지 않고 컴포지션을 사용하는 것으로 명시되어 있습니다.

containerClass 외부의 페이지 매김을 이동시키는 가장 좋은 방법은 무엇입니까? 작곡을 할 수 있습니까?

Answer 1

이 구성 요소가이 구조에서 2 차 라이브러리와 정렬되도록 렌더링하기 때문에 할 수있는 일이 많지 않습니다. In the rebuildSwiper function 당신은 dom 요소를이 다른 라이브러리에 전달하여 모든 상호 작용을 바인딩하고 처리하는 것을 볼 수 있습니다.

보조 앱의 유연성에 따라 렌더링 순서를 이동할 수 있습니다. 이렇게하려면 먼저 내부 라이브러리의 기능을 평가 한 다음이 저장소를 분기하고 @<username>/react-id-swiper과 같은 범위 패키지를 사용하여 업데이트를 게시하십시오.

Answer 2

저는 컴포지션이 좋고 좋을 것이라고 생각하지만 라이브러리를 사용하고 소스 클래스를 디자인 할 수 없기 때문에 상속을 선택하는 것이 유일한 방법이라고 생각합니다.

단순히 Swiper 클래스를 확장하는 것이 좋습니다. these recommended practices을 따르고 싶다면 컴포지션 재사용을 위해 forard를 사용할 수있는 방식으로 새로운 렌더링 메서드를 작성할 수 있지만,이 경우에 당신의 직감을 신뢰하는 것이 안전하다고 생각합니다.

나는이 질문을보고있을 것이고 다른 사람들이 그것에 접근하고 궁극적으로 취하는 것이 무엇인지를 알고 싶을 것이다.