我在 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;
我尝试在组件顶部添加“使用客户端”并修改代码以修复 IDE 显示的错误,数组中的所有图像都显示在浏览器网络选项卡中。
在 Next.js 中,您不能直接在顶级组件中使用 React hooks。相反,您可以在 Next.js 的 useEffect 函数中使用 useEffect 挂钩。以下是修改代码以使其在 Next.js 中运行的方法: