如何仅更改React组件的渲染

Question

I want to use react-id-swiper library which exports a component named Swiper . This is its render method:

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>
    );
  }
}

This component perfectly matches my needs, except that I need to place pagination in an outer place (outside of the containerClass element).

One possible solution is to inherit Swiper class and change only it's render method. However Facebook docs are explicit to not use inheritance and use composition instead.

What's the best way to move the pagination outside of containerClass ? Can it be done with composition?

Answer 1

As it stands there is not much you can do, since this component is render specifically in this structure align with a secondary library. In the rebuildSwiper function you can see it passing it the dom elements to this other library to bind and handle all interactions.

Depending on the flexibility of the secondary app you could move the render order. To do so I would first evaluate what the capabilities are of the inner library, then fork this repo and publish updates using the a scoped package such as @<username>/react-id-swiper .

Answer 2

I think composition would be well and good, but because you're using a library and not able to design the source class, I think inheritance is your only option.

I would recommend simply extending the Swiper class. You can write your new render method in a way that would allow for composition reuse moving forard if you want to follow these recommended practices , but I think it's safe to trust your gut in this case.

I'll be watching this question and am curious to see how others would approach it and what you're ultimate take is, too.