reactjs 我正在使用react-responsive-carousel,但它不适用于NextJs中的SSR?你有在这个组件中启用SSR的例子吗?

d5vmydt9  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(134)

我正在做一个电子商务项目,必须通过SSR获取产品详细信息数据并将其呈现在屏幕上。虽然数据显示正确,但我面临着显示产品图像的问题。我正在为图片库使用react-responsive-carousel组件,但它无法正常工作。你能给我提供一个例子,说明如何使用这个组件与SSR?

import { Carousel } from "react-responsive-carousel";

<Carousel
  showArrows={true}
  showThumbs={false}
  className="position-relative"
>
      {detaildata?.listingImages?.map((item,index) => (
        <React.Fragment key={index}>
    
           <Image
              className="d-block imgdiv" src={item} alt=""
              layout="fill"
              objectFit="cover"
            />
        
        </React.Fragment>
      ))}

</Carousel>

我的预期输出是图像在nextjs中使用SSR正确渲染。
我的输出屏幕。

vh0rcniy

vh0rcniy1#

您应该设置innerWidth属性,如here所示

const getInnerWidth = () => {
    try {
      // if client
      return window.innerWidth;
    } catch(e) {
    // if server, set any desired value
      return 1024;
    }   
  };

  return (
    <Carousel items={[]} innerWidth={getInnerWidth()} />
  );

相关问题