将react ImageSlider适配到NextJS

jjjwad0x  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(97)

我在React中有下面的图像滑块,它的工作正常:

import React, { useState, useEffect } from "react";
import item1 from "./../assets/images/items/1.jpg";
import item2 from "./../assets/images/items/2.gif";

const imgs = [item1, item2]; // Array of images

const ImageSlider = () => {
  const [current, setCurrent] = useState(0); // Initialize state to display the first image

  // Change image every 2 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrent((current) => (current + 1) % imgs.length); // Move to the next image, go back to the first image after the last
    }, 4000); // Change every 2 seconds

    return () => {
      clearInterval(interval); // Clean up on unmount
    };
  }, []);

  return (
    <div className="relative">
      <img
        src={imgs[0]}
        className="w-full h-auto opacity-0"
        alt="placeholder"
      />
      {imgs.map((img, index) => (
        <img
          key={index}
          src={img}
          alt={`slide-img-${index}`}
          className={`absolute top-0 transition-opacity duration-1000 ease-in-out ${
            current === index ? "opacity-100" : "opacity-0"
          } w-full h-auto`}
        />
      ))}
    </div>
  );
};

export default ImageSlider;

但它在NextJS中不起作用,我调整了一下以修复错误:

"use client";
import React, { useState, useEffect } from "react";

const imgs = ["/images/1.jpg", "/images/2.gif", "/images/3.jpg"];
const ImageSlider = () => {
  const [current, setCurrent] = useState(0); // Initialize state to display the first image

  // Change image every 2 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrent((current) => (current + 1) % imgs.length); // Move to the next image, go back to the first image after the last
    }, 2000); // Change every 2 seconds

    return () => {
      clearInterval(interval); // Clean up on unmount
    };
  }, []);

  return (
    <div className="relative">
      <img
        src={imgs[0]}
        className="w-full h-auto opacity-0"
        alt="placeholder"
      />
      {imgs.map((img, index) => (
        <img
          key={index}
          src={img}
          alt={`slide-img-${index}`}
          className={`absolute top-0 transition-opacity duration-1000 ease-in-out ${
            current === index ? "opacity-100" : "opacity-0"
          } w-full h-auto`}
        />
      ))}
    </div>
  );
};

export default ImageSlider;

我尝试在组件顶部添加'use client',并修改代码以修复IDE显示的错误,数组中的所有图像都出现在浏览器网络选项卡中。

2fjabf4q

2fjabf4q1#

在Next.js中,你不能直接在顶层组件中使用React钩子。相反,您可以在Next.js的useEffect函数中使用useEffect钩子。下面是如何修改代码使其在Next.js中工作的方法:

import { useState, useEffect } from "react";

const imgs = ["/images/1.jpg", "/images/2.gif", "/images/3.jpg"];
const ImageSlider = () => {
const [current, setCurrent] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
  setCurrent((current) => (current + 1) % imgs.length);
}, 2000);

return () => {
  clearInterval(interval);
};
}, []); // Empty dependency array to run effect only once

return (
<div className="relative">
  <img
    src={imgs[0]}
    className="w-full h-auto opacity-0"
    alt="placeholder"
  />
  {imgs.map((img, index) => (
    <img
      key={index}
      src={img}
      alt={`slide-img-${index}`}
      className={`absolute top-0 transition-opacity duration-1000 ease-in-out ${
        current === index ? "opacity-100" : "opacity-0"
      } w-full h-auto`}
    />
  ))}
</div>
  );
};

 export default ImageSlider;

相关问题