我正在尝试将 Carousel 组件包装在一组映射对象周围，作为组件的子组件。目前我只能让映射创建映射对象的 1 个子项。

Carousel 需要像这样：

<Carousel>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</Carousel>

但在这个上不能正常工作

<Carousel>
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</Carousel>

请查看我的旋转木马环绕映射项目的 1 个子级的原始可重现代码：https : //codesandbox.io/s/blissful-elion-993vy 注意您会看到旋转木马工作正常，但许多旋转木马属性根本不起作用，因为它围绕着一个孩子，例如动画和指标props。

我试过这样做：

          <Carousel
            autoPlay={false}
            onClick={handleChangePage}
            next={loopNext}
            prev={loopPrev}
            NextIcon={<ArrowForwardIosRoundedIcon fontSize='large'/>}
            PrevIcon={<ArrowBackIosRoundedIcon fontSize='large'/>}
            navButtonsProps={{      
              style: {
                  backgroundColor: 'transparent',
                  color:"#447CF0"
              }
            }} 
            indicators={true}
            swipe={true}
            animation="slide"
          >
              {data[0]?.slice((page - 1) * itemsPerPage, page * itemsPerPage)
                .map((data, index) =>
                {
                  return (  
                    <Container key={index} maxWidth="lg" component="main">
                      <Grid container  key={index}>
                        <Grid item key={index} xs={4} md={4}>
                            <Card>
                            <CardHeader
                            title={<Chip label={data.symbol} />} 
                            subheader={data.adj_close}        
                            />      
                            <CardContent >
                              <MiniGraphs
                                historicalPrice={historicalPrice.filter(i => i.symbol === data.symbol)}
                                dateRange={date}
                              />            
                            </CardContent>
                            </Card>
                        </Grid>
                      </Grid>
                      </Container>
                    );
                })}
          </Carousel>

但是 Carousel 不会重新产生预期的结果。当我设置了每张幻灯片的 3 个孩子的数量时，它只会显示每张幻灯片 1 个孩子。

我想我也将项目数组切成 3 个项目的切片，然后将每个切片映射到 <Container> --> <Grid container> --> <Grid item/> --> ...

目前停留在如何实现这一点上。

编辑：我修复了沙箱。

编辑：所需的输出是让所有图形正确显示为数组中的多个子项。正如您在下图中所看到的，每张幻灯片只有一个孩子在填充 Carousel（我认为是因为我需要明确地映射一组孩子？）。注意到旋转木马下方的指示器（灰色圆圈）了吗？它们需要出现，否则它仍然是图形的一个大孩子。