我正在尝试将 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 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/> --> ...
目前还停留在如何实现这一目标上。
编辑：我修复了沙箱。
EDIT:
The desired output is to have all graphs displayed properly as many children in arrays. As you can see in the picture below, only one child is filling up the Carousel per slide (I think because I need to explicitly map at an array of children?). Notice the indicators (grey circles) below the Carousel? They need to appear, if not then it's still one big child of graphs.
轮播需要all要在开始时呈现的字段。
要创建每张幻灯片上包含 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>
Note:
我使用以下堆栈答案将数据数组分成 3 个块：
将数组分割成块 https://stackoverflow.com/questions/8495687/split-array-into-chunks
The <container>不创建行，它显示在列中。我想你应该能够解决这个问题，我不太熟悉material-ui
你正在渲染一个<container>对于每个地图迭代。
移动地图inside the <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 https://codesandbox.io/s/mystifying-pasteur-rmzu1