如何使用 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;

希望我解決了您的問題