时间戳

首页 > 解决方案 > 如何为轮播映射一组子项？

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

问题描述

我正在尝试将 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
            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/> --> ...

目前坚持如何实现这一目标。

编辑：我修复了沙箱。

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

标签： javascriptreactjs

解决方案

更新的答案：

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

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

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

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

    将数组拆分为块

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

沙盒

原答案：

您正在<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>

更新的 CodesandBox

推荐阅读