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

Question

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

我正在使用 pnp 控件 Carousel

实控网址：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}

属性需要根据'key'属性区分的元素数组

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

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

在轮播元素属性中使用上述组件如下：

element={<HomePageCarousel />}

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

Answer 1

我正在阅读 documentation 的 element 属性，其中指出：

要在轮播中显示的固定元素数组 - 如果不使用 triggerPageEvent。如果使用 triggerPageEvent，则必须提供 JSX.Element。元素根据“key”属性进行区分。

因为element 是必需的，所以输入您必须传递的内容，可以是JSX.Element | JSX.Element[]。

因此，基于此，我们需要为<Carousel element={this.state.currentCarouselElement} /> 创建一个JSX 元素数组。

所以我们需要的是Carousel 组件的element 属性基本上是一个包含JSX 元素列表的数组。因此，我认为基于此您可以执行以下操作：

class App extends Component {
  constructor() {
    super();

    // here we create an array with two JSX elements in an array
    this.state = {
      currentCarouselElement: [
        <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 article 1 text</span>
          </div>
        </div>,
        <div key="2">
          <a href="#">
            <img src="images/banner_2.jpg" alt="banner" className="rounded-top" />
          </a>
          <div className="bg-white rounded-bottom p-10">
            <span className="font-color-green font-weight-bold ">News article 2 text</span>
          </div>
        </div>
      ]
    }
  }

  // removed other properties just for the example you can add them back
  render() {
    return <Carousel element={this.state.currentCarouselElement}
    />
  } 
}

或者其他解决方案仍然可以使用HomeCarouselComponent，就像这样：

public render(): React.ReactElement<IHomePageCarouselProps> {
    return [
      <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 article 1 text</span>
        </div>
      </div>,
      <div key="2">
        <a href="#">
          <img src="images/banner_2.jpg " alt="banner" className="rounded-top" />
        </a>
        <div className="bg-white rounded-bottom p-10">
          <span className="font-color-green font-weight-bold ">News article 2 text</span>
        </div>
      </div>
    ]
}

请注意render 函数返回一个由JSX 元素组成的数组，分号分隔：

[
   <div key="1"></div>,
   <div key="2"></div>
]

附加信息是，对于每个JSX 元素，您需要传递一个key 属性，就像我为<div key="1"> 所做的那样。我认为在Carousel 组件内部，render 方法使用map，这需要每个渲染元素的key 属性。

我希望这会有所帮助！

Answer 2

要在 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>
)