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

Question

我正在使用 React 和 pnp 控件

为 SharePoint Online 开发 spfx web 部件

我用的是pnp控制轮播

URL为实控：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>
    )
  }

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

element={<HomePageCarousel />}

但是 HomePageCarousel 没有 main div 就无法渲染，这是 React 的要求。有人可以帮助我如何输出或提取元素数组吗？

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

Answer 2

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

Fixed array of elemenets to be displayed in carousel - if triggerPageEvent is not used. In case triggerPageEvent is in use, JSX.Element has to be provided. Elements are distinguished based on the 'key' property.

并且因为 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函数returns一个JSX个元素的数组，分号分隔：

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

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

希望对您有所帮助！

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

Extract array of element from rendered component in React

javascript

reactjs

sharepoint-online

spfx