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编译器无法“知道”结束标记将永远显示，因为这取决于{{1} }。您必须将开始和结束标签呈现为同一表达式的一部分，以便JSX进行编译。

可能最干净的方法是在单独的函数中对children进行分组，然后映射结果，只需在children内渲染每个组，就像这样：

<Carousel.Item></Carousel.Item>

对多个项目进行轮播

1 个答案: