如何为轮播映射一组子项？

Question

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

轮播应该是这样的：

<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 的许多属性根本不起作用，因为它被包裹在一个子对象上，例如动画和指示器属性。

我试过这样做：

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

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

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

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

编辑：我修复了沙盒。

编辑： 所需的输出是使所有图形正确显示为数组中的子节点。正如您在下图中看到的，每张幻灯片只有一个孩子正在填充轮播（我想是因为我需要明确地映射到一组孩子？）。注意到轮播下方的指示器（灰色圆圈）了吗？他们需要出现，如果没有，那么它仍然是图表的一个大孩子。

Answer 1

更新答案：

轮播需要所有在开始时呈现的字段。

要创建多张幻灯片，每张幻灯片上有 3 个项目，您应该将数据数组“拆分”为多个部分，每个部分包含 3 个项目。

对于这些项目，您渲染一个带有 3 个子项的 <Container>，如下所示：

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>

注意：

• 我已使用以下堆栈答案将数据数组拆分为 3 块：

  Split array into chunks

• <container> 不会创建行，而是显示在列中。我想你应该可以解决这个问题，我对material-ui不是很熟悉

Sandbox

---

原答案：

您正在为每个地图迭代渲染一个<container>。

将地图移入<container>，这样您就可以在单个<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

Answer 2

根据我对问题陈述的理解，您希望实现两种可能的目标。

第一个：如果您想在一张幻灯片中显示所有三个图表，您应该将您的symbolData 地图移动到<Grid container> 中，就像上面的解决方案和这个CodeSandbox 由于您已经使用页码进行切片，因此您将看到 n 个不同的幻灯片，每张幻灯片根据页数显示 3 个图表。

第二个（不太可能）：您可能希望以幻灯片的全宽显示图表。为此，您需要在<Grid item key={index} xs={?} md={?}> 中使用xs={12} md={12}