如何在点击图标时将下拉菜单添加到反应表

import React, { useState } from 'react';

const DropdownMenu = () => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  const toggleDropdown = () => {
    setIsDropdownOpen(!isDropdownOpen);
  };

  return (
    <div>
      <button onClick={toggleDropdown}>点击图标</button>
      {isDropdownOpen && (
        <ul className="dropdown-menu">
          <li>菜单项1</li>
          <li>菜单项2</li>
          <li>菜单项3</li>
        </ul>
      )}
    </div>
  );
};

export default DropdownMenu;

import React, { useState, useEffect } from 'react';

const DropdownMenu = () => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  const toggleDropdown = () => {
    setIsDropdownOpen(!isDropdownOpen);
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (isDropdownOpen && !event.target.closest('.dropdown-menu')) {
        setIsDropdownOpen(false);
      }
    };

    document.addEventListener('click', handleClickOutside);
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, [isDropdownOpen]);

  return (
    <div>
      <button onClick={toggleDropdown}>点击图标</button>
      {isDropdown => (
        <ul className="dropdown-menu">
          <li>菜单项1</li>
          <li>菜单项2</li>
          <li>菜单项3</li>
        </ul>
      )}
    </div>
  );
};

export default DropdownMenu;