為什么我的 React `Carousel` 無法正確呈現？

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>
  )
} 

Styles：

.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}
        }
     }

2. 嘗試使用簡單的&&運算符，而不是三元運算符：

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

3. 雖然映射給出了最外層元素的鍵：

    {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 道具：

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

2. 你沒有指定你在哪里包含那個 flex css helper 東西？ 我的假設是您正在嘗試使用：

.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;
}

3. 您可能沒有為react-multi-carousel導入 css：

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

簡而言之，我很確定它是 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.
    }
  };

Answer 3

我相信你忘了添加import 'react-multi-carousel/lib/styles.css'; 到您的頂級文件。 例如： _app.tsx的 _app.tsx。