ReactJs Accordion自动关闭机制

import React, { useState } from 'react';

const Accordion = () => {
  const [activeIndex, setActiveIndex] = useState(null);

  const handleAccordionClick = (index) => {
    if (index === activeIndex) {
      setActiveIndex(null); // 关闭已经展开的区域
    } else {
      setActiveIndex(index); // 展开当前点击的区域
    }
  };

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>
          <div onClick={() => handleAccordionClick(index)}>
            {item.title}
          </div>
          {activeIndex === index && (
            <div>{item.content}</div> // 只展开activeIndex对应的内容区域
          )}
        </div>
      ))}
    </div>
  );
};

export default Accordion;