javascript - 如何为旋转木马映射一组子项？

Question

我正在尝试将 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
请注意，您会看到 Carousel 工作正常，但许多 Carousel 属性根本不起作用，因为它围绕着一个 child ，例如动画和指标 Prop 。
我试过这样做:

          <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 个 child 的数量时，它只会显示每张幻灯片 1 个 child 。
我想我也将项目数组切成 3 个项目的切片，然后将每个切片映射到 <Container> --> <Grid container> --> <Grid item/> --> ...目前停留在如何实现这一点上。
编辑:我修复了沙箱。
编辑:
所需的输出是让所有图形正确显示为数组中的多个子项。正如您在下图中所看到的，每张幻灯片只有一个 child 在填充 Carousel(我认为是因为我需要明确地映射一组 child ？)。注意到转盘下方的指示器(灰色圆圈)了吗？它们需要出现，否则它仍然是图形的一个大 child 。

Answer 1

更新的答案:
轮播需要 全部 要在开始时呈现的字段。
要在每张幻灯片上创建包含 3 个项目的多张幻灯片，您应该将数据数组“拆分”为多个部分，每个部分包含 3 个项目。
对于这些项目，您渲染单个 <Container>里面有 3 个 child ，就像这样:

const array_chunks = (array, chunk_size) => Array(Math.ceil(array.length / chunk_size)) .fill() .map((_, index) => index * chunk_size) .map((begin) => array.slice(begin, begin + chunk_size)); 
const chunks = array_chunks(SymbolData, 3);

<Carousel>
    {chunks.map((chuk) => {
        return (
            <Container>
                {chuk.map((c) => {
                    return (
                        <Grid item xs={4} md={4}>
                            <Card>
                                <CardHeader/>
                                <CardContent>
                                </CardContent>
                            </Card>
                        </Grid>
                    );
                })}
            </Container>
        );
    })}
</Carousel>

注:

我使用以下 Stack Answer 将数据数组拆分为 3 个块:
Split array into chunks

<container>不创建行，它显示在列中。我想你应该能够解决这个问题，我对 material-ui 不太熟悉

Sandbox

原答案:
您正在渲染 <container>对于每次 map 迭代。
在 <container> 内移动 map 因此您可以在单个 <container> 中渲染多个“单元格”像这样:

<Container  maxWidth="lg" component="main">
    <Grid container>
        {SymbolData?.slice((page - 1) * itemsPerPage, page * itemsPerPage).map(
            (data, index) => {
                return (
                    <Grid item key={index} xs={4} md={4}>
                        <Card>
                            ...
                        </Card>
                    </Grid>
                );
            }
        )}
    </Grid>
</Container>

Updated CodesandBox