为什么我的反应“轮播”不能正确渲染？

Question

所以我使用react-multi-carousel，它看起来像这样：

轮播组件：

import Carousel from 'react-multi-carousel';

const Container = ({movies}: {movies:MovieResults | null}) => {

  const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 6,
      slidesToSlide: 3 // optional, default to 1.
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 4,
      slidesToSlide: 4 // optional, default to 1.
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 3,
      slidesToSlide: 3 // optional, default to 1.
    }
  };

  const few_movies = movies?.results.slice(1,10);

return (
    <div>
      {movies?.results ?
                <Carousel
                swipeable={true}
                draggable={false}
                //showDots={true}
                responsive={responsive}
                ssr={true} // means to render carousel on server-side.
                //infinite={true}
                // autoPlaySpeed={2000}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass="carousel-container"
                removeArrowOnDeviceType={["tablet", "mobile"]}
                dotListClass="custom-dot-list-style"
                itemClass="carousel-item-padding-40-px"
                >
                    {movies?.results?.map((movie) =>
                      <Link to={`/movie/${movie.id}`} replace style={{ textDecoration: 'none' }}><MovieItem movie={movie} key={movie.id}/></Link>
                    )}
                </Carousel>
                :
                <div>Loading...</div>
      }
    </div>
  )
} 

样式：

.container{
    @include flex(center, center);
    position: relative;
    flex-wrap: wrap;
    width:100%;
    height:100%;
    z-index: 1;
}

它在父组件中的样子：

<div className="section mb-3">
            <div className="section__header mb-2">
              <h2 style={{color:"#fff"}}>Now playing movies</h2>
              <Link to="/playing" className="movies_link">Explore all</Link>
            </div>
            {playing ? <Container movies={playing}/> : <div>Loading</div>}
</div>

但是我有一个问题，当我打开页面时，它会以某种奇怪的方式随机呈现，这是屏幕截图：

它只是垂直向下，其他元素也在下面，它不会每次都发生，但它可以随机发生。所以我想弄清楚我怎样才能始终以正确的方式做到这一点。

Answer 1

我实际上不知道是什么导致了您的问题，但也许我可以指出如果它们发生变化可能会有所帮助的事情：

1. 当您编写responsive 对象时，我认为不同的视图必须有不同的断点值。喜欢：

     {
        desktop: {
          breakpoint: { max: 3000, min: 1024 }
        },
        tablet: {
          breakpoint: { max: 1023.98, min: 464}
        }
     }

1. 尝试使用简单的&& 运算符，而不是三元运算符：

    {playing && <Container movies={playing}/>}
    {!playing && <div>Loading</div>}

1. 虽然映射为最外层元素提供了键：

    {movies?.results?.map((movie) =>
                      <Link 
                       to={`/movie/${movie.id}`} 
                       key={movie.id}
                       replace 
                       style={{ textDecoration: 'none' }}
                       >
                         <MovieItem movie={movie} />
                      </Link>
     )}

Answer 2

1. 首先要注意你的奇怪行为是你给了错误的元素 key prop。你的链接（最外层元素）组件应该有 key prop：

{movies?.results?.map((movie) =>
    <Link to={`/movie/${movie.id}`} key={movie.id}><MovieItem movie={movie}/></Link>
)}

1. 你没有指定你在哪里包含那个 flex css 助手的东西？ 我的假设是您正在尝试使用：

.carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
  gap: 10px;
  width:100%;
  height:100%;
  z-index: 1;
}

你应该改成：

.carousel-container{
  position: relative;
  width:100%;
  height:100%;
  z-index: 1;
}

简而言之，我很确定它是 Carousel Container 上的 flex 样式。还请考虑您正在使用 flex: wrap 设置容器样式，这可能会导致您的项目堆叠。

此外，在较小的屏幕上，您实际上可能只想显示单个项目。

 const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 6,
      slidesToSlide: 3 // optional, default to 1.
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 4,
      slidesToSlide: 4 // optional, default to 1.
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
      slidesToSlide: 1 // optional, default to 1.
    }
  };