我们如何合并两个不同的React JS Swiper组件？

Question

我有两个不同的组成部分。在其中一个组件中，我有三个滑行幻灯片。在其中一张幻灯片中，我调用了一个组件，该组件使用6个滑动幻灯片来渲染另一个滑动组件。如何合并这两张幻灯片，使其像一个滑动组件一样工作？

<Swiper {...params} >
//1st slide
                <div className="swiper-slide">
                <TVLeaderboardContainer />`enter code here`
                </div>
       //2nd slide

          <div className="swiper-slide">
            <MetricWrapper device={this.context.device}>
              {metricScopeColumns}
            </MetricWrapper>
          </div>
//3rd slide
          <div className="swiper-slide">
            <TVMetricColumnContainer/>
          </div>
        </Swiper>