React Mantine Carousel组件冻结问题求助

问题描述 #

我是React新手，在项目中集成Mantine组件时遇到Carousel组件异常：

• 组件冻结无法正常交互，调整CardsCarousel.module.css的.card样式后问题依旧
• 开启loop模式时，组件不仅冻结还出现重复实例，仅在浏览器缩放后恢复正常

相关代码 #

CardsCarousel.tsx #

import { Carousel } from '@mantine/carousel';
import { useMediaQuery } from '@mantine/hooks';
import { Image, Paper, Text, Title, Button, useMantineTheme, rem } from '@mantine/core';
import classes from './CardsCarousel.module.css';

interface CardProps {
  image: string;
  title: string;
  category: string;
  onClick?: () => void;
}

function Card({ image, title, category, onClick }: CardProps) {
  return (
    <Button className={classes.card} style={{ 
      background: 'rgba(0, 0, 0, 0.7)', 
      padding: '0',
      borderRadius: '0',
      objectFit: 'fill',
      height: '100%',
    }} onClick={onClick}>
      <Image src={image} radius="0px" className={classes.image}/>
    </Button>
  );
}

const data = [
  {
    image: 'https://docs.fivem.net/vehicles/baller3.webp',
    title: '\n\n\n\n\n',
    category: 'nature',
    onClick: () => alert('baller3'),
  },
  // ... 其他数据项
  {
    image: 'https://docs.fivem.net/vehicles/tenf2.webp',
    title: 'Hawaii beaches review: better than you think',
    category: 'beach',
    onClick: () => alert('tenf2'),
  },
];

export function CardsCarousel() {
  const theme = useMantineTheme();
  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
  const slides = data.map((item) => (
    <Carousel.Slide key={item.title}>
      <Card {...item} />
    </Carousel.Slide>
  ));

  return (
    <Carousel slideSize="18%" height="100%" align="start" slideGap="md" dragFree withIndicators slidesToScroll={5}>
      {slides}
    </Carousel>
  );
}

CardsCarousel.module.css #

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  background-size: cover;
  background-position: center;
  flex-basis: auto;
  transition: border-color 0.3s ease;
  cursor: pointer;
}
.card:hover {
  border: 4px solid white;
}

.image {
  transition: transform 0.3s ease;
}

.card:hover .image {
  transform: scale(1.05);
  bottom: 5px;
  left: 5px;
  color: white;
}

app.css 网格配置 #

.app-container {
  display: grid;
  user-select: none;
  grid-template-areas: 
    "a b"
    "a c"
  ;
  grid-template-columns: 10% 90%;
  grid-template-rows: 80% 20%;
}

.carousel-grid {
  grid-area: c;
}

修复方案 #

1. 解决尺寸计算异常 #

Carousel设置height: 100%依赖父容器的明确高度，但网格行高20%可能无法被正确解析。可以：

• 给.carousel-grid添加明确高度：

  .carousel-grid {
    grid-area: c;
    height: 200px;
  }
  

• 或者将Carousel的height改为具体数值：

  <Carousel slideSize="18%" height={rem(200)} align="start" slideGap="md" dragFree withIndicators slidesToScroll={5}>
  

2. 修复重复key问题 #

当前使用item.title作为slide的key，存在重复风险（比如第一个项的title是换行符，可能和其他项重复），导致React渲染异常。给data数组添加唯一id，用id作为key：

const data = [
  {
    id: 'baller3',
    image: 'https://docs.fivem.net/vehicles/baller3.webp',
    title: '\n\n\n\n\n',
    category: 'nature',
    onClick: () => alert('baller3'),
  },
  {
    id: 'tenf2',
    image: 'https://docs.fivem.net/vehicles/tenf2.webp',
    title: 'Hawaii beaches review: better than you think',
    category: 'beach',
    onClick: () => alert('tenf2'),
  },
];

// 渲染slide时
<Carousel.Slide key={item.id}>
  <Card {...item} />
</Carousel.Slide>

3. 排查CSS冲突 #

• 移除.card中的flex-basis: auto，避免干扰slide尺寸计算：

  .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    background-size: cover;
    background-position: center;
    /* 移除flex-basis: auto */
    transition: border-color 0.3s ease;
    cursor: pointer;
  }
  

• 父容器的user-select: none可能影响拖拽交互，给Carousel容器添加覆盖：

  .carousel-grid {
    grid-area: c;
    user-select: auto;
  }
  

4. Loop模式优化 #

开启loop时，Mantine会复制slide实现循环，确保每个slide的交互无副作用（比如避免alert这类弹窗），同时保证key唯一，防止重复实例问题。

内容的提问来源于stack exchange，提问作者Tolga