Reactコンポーネントのレンダリングのみを変更する方法

Question

Swiperという名前のコンポーネントをエクスポートするreact-id-swiperライブラリを使用します。 これはそのrender方法です：

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要素の外）で改ページを配置する必要があることを除いて、私のニーズにマッチします。

可能な解決策の1つは、Swiperクラスを継承し、それだけを変更することです。renderメソッドです。しかし、Facebookのドキュメントは、継承を使用せず、代わりに合成を使用することを明示しています。

ページ分割をcontainerClassの外側に移動する最も良い方法は何ですか？ それは構成でできますか？

Answer 1

このコンポーネントは具体的にはこの構造内でセカンダリライブラリと整列されているため、多くのことはできません。 In the rebuildSwiper functionこれはdom要素をこの他のライブラリに渡して、すべての対話をバインドして処理することがわかります。

セカンダリアプリの柔軟性に応じて、レンダー順を変更することができます。これを行うには、最初に内部ライブラリの機能を評価し、次にこのリポジトリをフォークし、@<username>/react-id-swiperなどのスコープ付きパッケージを使用して更新を公開します。

Answer 2

構図は良くていいと思うけど、ライブラリを使っていてソースクラスを設計できないので、継承はあなたの唯一の選択肢だと思う。

単純にSwiperクラスを拡張することをお勧めします。 these recommended practicesに従う場合は、コンポジションの再利用が可能になるような方法で新しいレンダリングメソッドを記述できますが、この場合はあなたの腸を信頼するのが安全だと思います。

私はこの質問を見ていて、他の人がそれに近づく方法を知りたいと思っています。あなたが究極的に取っているものもあります。