React在菜单上显示单独的弹出组件单击

import React, { useState } from 'react';

const Menu = () => {
  const [isPopUpVisible, setIsPopUpVisible] = useState(false);

  const handleButtonClick = () => {
    setIsPopUpVisible(!isPopUpVisible);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>显示弹出组件</button>
      {isPopUpVisible && <PopUpComponent />}
    </div>
  );
};

export default Menu;

import React from 'react';

const PopUpComponent = () => {
  return <div>这是一个弹出组件</div>;
};

export default PopUpComponent;

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

const App = () => {
  return (
    <div>
      <h1>我的应用程序</h1>
      <Menu />
    </div>
  );
};

export default App;