在 NextJS 中使用定时器循环打开手风琴项目？

Question

我在 NextJS 中创建了一个手风琴组件。现在我想自动一一打开手风琴项目，并为每个单独的手风琴项目设置自定义持续时间。此外，手风琴组旁边的图像应根据打开的手风琴项目进行更改。

例如： https://www.perspective.co/（大约是本页的第四部分）

当前工作

这是我的代码：

手风琴项目

'use client'

const OnboardItem = ({ title, description, duration, isOpen, toggle }:{ title:string, description:string, duration:number, isOpen:boolean, toggle:any }) => {

  return(
    <div className='relative'>
      <div className='w-0.5 bg-neutral-300 dark:bg-neutral-500 absolute left-0 top-0 bottom-0'></div>
      <div className='ps-5 items-center'>
        <p className={`text-2xl leading-[38px] select-none cursor-pointer ${isOpen ? 'text-black dark:text-primary' : 'text-neutral-400 dark:text-neutral-300'}`} onClick={toggle}>{title}</p>
        <div className={`grid mt-1 overflow-hidden ease-in-out ${isOpen ? 'accordion-animate-open pb-1' : 'accordion-animate'}`}>
          <div className='leading-7 min-h-0'><p className='select-none'>{description}</p></div>
        </div>
      </div>
    </div>
  )
}

export default OnboardItem

手风琴组

const [isOpen, setIsOpen] = useState(0)
    
const toggleOpen = (id:any) => () => setIsOpen(id)
    
  onboardData.forEach((element, index) => {
        
 });
    
 { 
   onboardData.map(({title, description, duration}, index) => (
     <OnboardItem 
       key={index}
       title={title}
       description={description}
       duration={duration}
       isOpen={isOpen === index}
       toggle={toggleOpen(index)}
     />
   ))
 }

数据

export const onboardData = [
  {
    title: 'Discovery Call',
    description: 'How embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 5000
  },
  {
    title: 'Prototype Creation',
    description: 'What embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 15000
  },
  {
    title: 'Design & Development',
    description: 'How embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 10000
  },
  {
    title: 'Testing Modules',
    description: 'Where embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 5000
  },
  {
    title: 'Launch',
    description: 'Can embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 10000
  },
];

Answer 1

在 Accordion Group 组件中添加 useEffect，并确保在该组件顶部使用“use client”。

  useEffect(() => {
    const intervalId = setInterval(() => {
      setIsOpen((isOpen + 1) % onboardData.length);
    }, onboardData[isOpen].duration);
    return () => clearInterval(intervalId);
  }, [isOpen]);

别忘了给我投票，如果您需要任何进一步的帮助，请告诉我..