javascript - 轮播未在每张幻灯片上呈现两个元素

问题描述

我正在使用这个carousel-library。
我想在轮播的每张幻灯片中显示两张卡片。我的代码-

目录.js

import React from 'react';
import { Grid, Typography, Divider, FormControl, InputLabel, MenuItem, Select, Button } from '@material-ui/core';
import CarouselComp from '../../components/carousel/CarouselComp'
import RectangularCard1 from '../../components/cards/ReactangularCard1';
import { catalog_data } from '../../static_data'
    
const Catalog = (props) => {
    
    let popularBundles = JSON.parse(JSON.stringify(catalog_data.popularBundles))    

    return (
        <Grid container>
            <CarouselWrapperRect data={popularBundles} />
        </Grid>
    )
}


const CarouselWrapperRect = ({ data }) => {
    let newArray = [];
    while (data.length > 0)
        newArray.push(data.splice(0, 2));

    return (
        <Grid item container >
            <Grid item container>
                <CarouselComp>
                    {newArray.map((each, i) =>
                        <CarouselSlideRect newData={each} key={i} />
                    )}
                </CarouselComp>
            </Grid>
        </Grid >
    )
}



const CarouselSlideRect = ({ newData }) => {
    return (
        <Grid container direction='row' xs={12} spacing={2}>
            {newData.map((each, i) =>
                <Grid item xs={6} >
                    <RectangularCard1 bundleBy={each.bundleTitle} />
                </Grid>
            )}
        </Grid>
    )
}

export default Catalog;

CarouselComp.js

import React, { useState } from 'react'
import Carousel from 'react-material-ui-carousel'    
import { Button } from '@material-ui/core'
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';

const CarouselComp = ({ children }) => {

    return (
        <div>
            <Carousel autoPlay={false} navButtonsAlwaysVisible={true}
              cycleNavigation={false}
              NavButton={({ onClick, className, style, next, prev }) => {
                    return (
                        <Button onClick={onClick} className={classes.navButton}>
                            {next && <ChevronRightIcon />}
                            {prev && <ChevronLeftIcon />}
                        </Button>
                    )
                }}
            >
                {
                    children
                }
            </Carousel>
        </div>
    )
}

export default CarouselComp;

矩形卡1.js

import React from 'react'
import {
     Card
} from '@material-ui/core'

const RectangularCard1 = (props) => {

    let { bundleBy } = props

    return (
        <Card variant='outlined'>
            <span>{bundleBy}</span>
        </Card>
    )
}

export default RectangularCard1;

静态数据.js

export const catalog_data = {

    popularBundles: [{
        bundleTitle: 'by Octopi One',
    },
    {
        bundleTitle: 'by Developia'
    },
    {
        bundleTitle: 'by Custom Company Name'
    },
    ],
}

我没有看到任何轮播渲染，为什么会这样？我想在一张幻灯片中最多显示两张卡片，如下所示-

这是我的沙盒链接-codesandbox

标签： javascriptreactjsmaterial-uicarousel

你直接改变了data道具。不要在反应中改变道具。取而代之的是，复制dataprop 里面的内容newData并像这样继续：-

  let newData = [...data];
  while (newData.length > 0) newArray.push(newData.splice(0, 2));

这是分叉的代码框

javascript - 轮播未在每张幻灯片上呈现两个元素

问题描述

解决方案

推荐阅读