Я занимаюсь разработкой веб-части spfx для SharePoint Online с использованием элементов управления React и pnp

Я использую pnp control Карусель

URL для фактического элемента управления: https://github.com/SharePoint/sp-dev-fx-controls-react/blob/master/docs/documentation/docs/controls/Carousel.md

 {amp}lt;Carousel buttonsLocation={CarouselButtonsLocation.top} buttonsDisplay={CarouselButtonsDisplay.block} contentContainerStyles={styles.carouselContent} containerButtonsStyles={styles.carouselButtonsContainer} isInfinite={true} element={this.carouselElements} onMoveNextClicked={(index: number) ={amp}gt; { console.log(`Next button clicked: ${index}`); }} onMovePrevClicked={(index: number) ={amp}gt; { console.log(`Prev button clicked: ${index}`); }} /{amp}gt; 

В элементе управления выше = {this.carouselElements}

свойство нуждается в массиве элементов, выделенных на основе свойства ‘key’

Теперь я создал еще один компонент, который отображается следующим образом:

 public render(): React.ReactElement{amp}lt;IHomePageCarouselProps{amp}gt; { return ( {amp}lt;div className={styles.homePageCarousel}{amp}gt; {/* {amp}lt;div className="owl-carousel owl-theme owl-banner "{amp}gt; */} {amp}lt;div key="1"{amp}gt; {amp}lt;a href="#"{amp}gt; {amp}lt;img src="images/banner_1.jpg " alt="banner" className="rounded-top" /{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;div className="bg-white rounded-bottom p-10"{amp}gt; {amp}lt;span className="font-color-green font-weight-bold "{amp}gt; 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. ... {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div key="2"{amp}gt; {amp}lt;a href="#"{amp}gt; {amp}lt;img src="images/banner_1.jpg " alt="banner" className="rounded-top" /{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;div className="bg-white rounded-bottom p-10"{amp}gt; {amp}lt;span className="font-color-green font-weight-bold "{amp}gt; 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. ... {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {/* {amp}lt;/div{amp}gt; */} {amp}lt;/div{amp}gt; ) } 

используя вышеуказанный компонент в свойстве элемента Карусель, как показано ниже:

 element={{amp}lt;HomePageCarousel /{amp}gt;} 

но HomePageCarousel не может HomePageCarousel рендеринг без основного div что является требованием React . Может кто-нибудь помочь мне, как я могу вывести или извлечь массив элементов?

Я читал документацию для свойства element которая гласит:

Исправлен массив элементов, отображаемый в карусели — если не используется triggerPageEvent. В случае использования triggerPageEvent должен быть указан JSX.Element. Элементы различаются на основе свойства «ключ».

А поскольку element обязателен, введите то, что вы должны передать, может быть JSX.Element | JSX.Element[] JSX.Element | JSX.Element[] .

Исходя из этого, нам нужно создать массив элементов JSX для {amp}lt;Carousel element={this.state.currentCarouselElement} /{amp}gt; .

Итак, нам нужно, чтобы свойство element компонента Carousel в основном одним массивом со списком элементов JSX . Поэтому я думаю, что на основании этого вы можете сделать следующее:

 class App extends Component { constructor() { super(); // here we create an array with two JSX elements in an array this.state = { currentCarouselElement: [ {amp}lt;div key="1"{amp}gt; {amp}lt;a href="#"{amp}gt; {amp}lt;img src="images/banner_1.jpg" alt="banner" className="rounded-top" /{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;div className="bg-white rounded-bottom p-10"{amp}gt; {amp}lt;span className="font-color-green font-weight-bold "{amp}gt;News article 1 text{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt;, {amp}lt;div key="2"{amp}gt; {amp}lt;a href="#"{amp}gt; {amp}lt;img src="images/banner_2.jpg" alt="banner" className="rounded-top" /{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;div className="bg-white rounded-bottom p-10"{amp}gt; {amp}lt;span className="font-color-green font-weight-bold "{amp}gt;News article 2 text{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ] } } // removed other properties just for the example you can add them back render() { return {amp}lt;Carousel element={this.state.currentCarouselElement} /{amp}gt; } } 

Или другое решение может использовать еще HomeCarouselComponent так:

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

Пожалуйста, поймите, что функция render возвращает массив элементов JSX , разделенных точкой с запятой:

 [ {amp}lt;div key="1"{amp}gt;{amp}lt;/div{amp}gt;, {amp}lt;div key="2"{amp}gt;{amp}lt;/div{amp}gt; ] 

Дополнительная информация заключается в том, что для каждого элемента JSX вам нужно передать свойство key как я это сделал для {amp}lt;div key="1"{amp}gt; . Я думаю, что внутри компонента Carousel метод render использует map которая требует key атрибута для каждого рендеринга элементов.

Надеюсь, это поможет!

Для рендеринга списка элементов в React вы можете использовать React.Fragment

  return( {amp}lt;React.Fragment{amp}gt; {amp}lt;div key="1"{amp}gt; {amp}lt;a href="#"{amp}gt; {amp}lt;img src="images/banner_1.jpg " alt="banner" className="rounded-top" /{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;div className="bg-white rounded-bottom p-10"{amp}gt; {amp}lt;span className="font-color-green font-weight-bold "{amp}gt; 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. ... {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div key="2"{amp}gt; {amp}lt;a href="#"{amp}gt; {amp}lt;img src="images/banner_1.jpg " alt="banner" className="rounded-top" /{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;div className="bg-white rounded-bottom p-10"{amp}gt; {amp}lt;span className="font-color-green font-weight-bold "{amp}gt; 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. ... {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/React.Fragment{amp}gt; ) 
Гагандип Каур

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,