Реагировать Карусель с несколькими предметами - PullRequest
Новая
       11

Реагировать Карусель с несколькими предметами

0 голосов
/ 24 февраля 2019

У меня проблемы с ползунком в троичных условиях, как я могу их решить?Он считает, что я закрываю элемент до того, как будет выполнено последнее предложение.Это попытка построить карусель из нескольких предметов.

<Carousel className="col-md-7 col-11" indicators="true" controls="false">
    {this.props.children.map((rooms,index) => 
        (index === 0 || index % 3 === 0) ? <Carousel.Item><h1>First</h1> : 
            ((index+1) % 3 === 0) ? <h1>Last</h1></Carousel.Item> : <h1>Middle</h1>
        )
    }
</Carousel>

1 Ответ

0 голосов
/ 24 февраля 2019

Проблема в том, что это недопустимый JSX.

Невозможно отобразить открывающий тег <Carousel.Item> без закрывающего тега как часть того же выражения.Понятно, что вы пытаетесь сделать здесь, но это не сработает, потому что JSX-компилятор не может «знать», что закрывающий тег будет когда-либо отображаться, потому что это зависит от children.У вас есть для отображения открывающих и закрывающих тегов как части одного и того же выражения, чтобы JSX мог скомпилировать.

Вероятно, самое чистое - группировать children вотделите функцию и затем отобразите результат, просто отобразив каждую группу внутри <Carousel.Item></Carousel.Item>, например: 

function groupIntoThrees (children) {
  const output = []
  let currentGroup = []

  children.forEach((child, index) => {
    currentGroup.push(child)

    if (index % 3 === 2) {
      output.push(currentGroup)
      currentGroup = []
    }
  })

  return output
}

... later in render method ...

<Carousel className="col-md-7 col-11" indicators="true" controls="false">
  {groupIntoThrees(this.props.children).map((group) => (
    <Carousel.Item>
      <h1>first: {group[0]}</h1>
      <h1>middle: {group[1]}</h1>
      <h1>last: {group[2]}</h1>
    </Carousel.Item>
  )} 
</Carousel>
...