React Carousel 与多个项目

Question

我的滑块在三元条件下出现问题，我该如何解决？ 它认为我在最后一个子句完成之前关闭了该项目。这是构建多项目轮播的尝试。

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

Answer 1

问题是这不是有效的 JSX。

您不能将没有结束标记的开始<Carousel.Item> 标记呈现为同一表达式的一部分。很清楚您在这里尝试做什么，但它无法工作，因为 JSX 编译器无法“知道”结束标记 ever 会被渲染，因为这取决于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>