如何在react js中通过悬停切换多个下拉列表

import React, { useState } from 'react';

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="dropdown" onMouseEnter={toggleDropdown} onMouseLeave={toggleDropdown}>
      <button className="dropdown-toggle">Toggle Dropdown</button>
      {isOpen && (
        <ul className="dropdown-menu">
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      )}
    </div>
  );
};

export default Dropdown;

import React from 'react';
import Dropdown from './Dropdown';

const App = () => {
  return (
    <div>
      <Dropdown />
      <Dropdown />
      <Dropdown />
    </div>
  );
};

export default App;