javascript - 从 React 中的渲染组件中提取元素数组

Question

我正在使用React和 pnp 控件为 SharePoint Online 开发 spfx Web 部件

我正在使用 pnp 控制轮播

实控网址：https ://github.com/SharePoint/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/Carousel.md

<Carousel
  buttonsLocation={CarouselButtonsLocation.top}
  buttonsDisplay={CarouselButtonsDisplay.block}

  contentContainerStyles={styles.carouselContent}
  containerButtonsStyles={styles.carouselButtonsContainer}

  isInfinite={true}

  element={this.carouselElements}
  onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
  onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
/>

在上面的控制元素={this.carouselElements}

属性需要基于“键”属性区分的元素数组

现在我创建了另一个组件，呈现如下：

public render(): React.ReactElement<IHomePageCarouselProps> {
    return (
      <div className={styles.homePageCarousel}>
        {/* <div className="owl-carousel owl-theme owl-banner "> */}
        <div key="1">
          <a href="#">
            <img src="images/banner_1.jpg " alt="banner" className="rounded-top" />
          </a>
          <div className="bg-white rounded-bottom p-10">
            <span className="font-color-green font-weight-bold ">
              News title will show here. News title will show here. News title will show
              here. News title will show here. News title will show here. News title will
              show here. News title will show here. News title will show here. ...
                </span>
          </div>
        </div>
        <div key="2">
          <a href="#">
            <img src="images/banner_1.jpg " alt="banner" className="rounded-top" />
          </a>
          <div className="bg-white rounded-bottom p-10">
            <span className="font-color-green font-weight-bold ">
              News title will show here. News title will show here. News title will show
              here. News title will show here. News title will show here. News title will
              show here. News title will show here. News title will show here. ...
              </span>
          </div>
        </div>
        {/* </div> */}
      </div>
    )
  }

在 Carousel 元素属性中使用上述组件，如下所示：

element={<HomePageCarousel />}

但HomePageCarousel不能在没有 main 的情况下渲染，div这是React. 有人可以帮助我如何输出或提取元素数组吗？

标签： javascriptreactjssharepoint-onlinespfx

Answer 1

要在 React 中呈现元素列表，您可以使用 React.Fragment

      return(
       <React.Fragment>

        <div key="1">
          <a href="#">
            <img src="images/banner_1.jpg " alt="banner" className="rounded-top" />
          </a>
          <div className="bg-white rounded-bottom p-10">
            <span className="font-color-green font-weight-bold ">
              News title will show here. News title will show here. News title will show
              here. News title will show here. News title will show here. News title will
              show here. News title will show here. News title will show here. ...
                </span>
          </div>
        </div>
        <div key="2">
          <a href="#">
            <img src="images/banner_1.jpg " alt="banner" className="rounded-top" />
          </a>
          <div className="bg-white rounded-bottom p-10">
            <span className="font-color-green font-weight-bold ">
              News title will show here. News title will show here. News title will show
              here. News title will show here. News title will show here. News title will
              show here. News title will show here. News title will show here. ...
              </span>
          </div>
        </div>


      </React.Fragment>
)