在react中单击时，切换多个div列表中仅一个div的下拉列表

import React, { useState } from 'react';

const DropdownList = () => {
  const [selectedDiv, setSelectedDiv] = useState(null);

  const handleDropdownClick = (divId) => {
    setSelectedDiv(divId === selectedDiv ? null : divId);
  };

  return (
    <div>
      <div className={`dropdown ${selectedDiv === 'div1' ? 'active' : ''}`}>
        <button onClick={() => handleDropdownClick('div1')}>
          Div 1
        </button>
        <div className="dropdown-content">
          {/* Dropdown content for Div 1 */}
        </div>
      </div>

      <div className={`dropdown ${selectedDiv === 'div2' ? 'active' : ''}`}>
        <button onClick={() => handleDropdownClick('div2')}>
          Div 2
        </button>
        <div className="dropdown-content">
          {/* Dropdown content for Div 2 */}
        </div>
      </div>

      <div className={`dropdown ${selectedDiv === 'div3' ? 'active' : ''}`}>
        <button onClick={() => handleDropdownClick('div3')}>
          Div 3
        </button>
        <div className="dropdown-content">
          {/* Dropdown content for Div 3 */}
        </div>
      </div>
    </div>
  );
};

export default DropdownList;