如何使用 reactjs 制作我的导航显示此弹出窗口

Question

当我点击navbar上的Pop Up窗口时，我需要弹出弹出窗口
我已经尽我所能，仍然无法正常工作。 帮助，谢谢

我的导航栏组件

import React from "react";

function Navbar() {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav mr-auto">

          <li className="nav-item active">
            <a className="nav-link" href="">
              Home
            </a>
          </li>

          <li className="nav-item">
            <a className="nav-link" href="#">
              Pop Up
            </a>
          </li>

        </ul>
      </div>
    </nav>
  );
}
export default Navbar;

我的弹出组件
我已经添加了一些条件

import React from "react";

const PopUp = (props) => {
  return props.trigger ? (
    <div className="popup" style={popUpStyle} id="popup">
      <h1>Pop Up</h1>
      <p>
        This is a pop up. <br /> Lorem ipsum dolor sit amet consectetur
        adipisicing elit. A fuga eum sapiente ratione tempora veniam odio
        corrupti, praesentium natus optio consequatur dignissimos deserunt
        voluptas nihil quam amet distinctio maiores voluptatibus.
      </p>
      <p className="closepop">Close</p>
    </div>
  ) : (
    ""
  );
};
export default PopUp;

我的应用

import "./App.css";
import PopUp from "./components/popup";
import { useState } from "react";

function App() {
  const [buttonPopup, setButtonPopUp] = useState(true);

  return (
    <div className="App">
      <PopUp trigger={buttonPopup} />;
    </div>
  );
}

export default App;


Any help will be Appreciated. Thank you

Answer 1

了解Lifting States Up以实现这一点。 您没有使用 Navbar 组件，因此我假设它将在App.jsx 中调用。 在您的代码中实现：

应用程序.js

function App() {
  const [buttonPopup, setButtonPopUp] = useState(false);
  return (
    <div className="App">
      <Navbar setButtonPopUp={setButtonPopUp} buttonPopup={buttonPopup} />
      <PopUp trigger={buttonPopup} />
    </div>
  );
}

导航栏.js

function Navbar(props) {
  const { setButtonPopUp, buttonPopup }= props;
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item">
            <a className="nav-link" href="#" onClick={() => setButtonPopUp(!buttonPopup)}>
              Pop Up
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
}
export default Navbar;

希望我解决了您的问题