Reactjs 如何在单击时加载组件？

我正在尝试构建一个类似reddit的web应用程序。我想在单击“登录/注册”下拉项时显示LoginModel组件，以便用户可以登录。我试过了，但什么也没发生。我将reactstrap库用于LoginModel组件。单击项目时，如何创建模态组件

<DropdownItem onClick={() => <LoginModal/>}>Log In / Sign Up</DropdownItem>

}>登录/注册

这是我的密码

import React, { useState } from "react";
import "../../App.scss";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";
import { Link } from "react-router-dom";
import LoginModal from "./LoginModal";
import SignupModal from "./SignupModal";

const Navbar = () => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [token, setToken] = useState("");
  const [username, setUsername] = useState("");

  const updateToken = () => {
    if (localStorage.getItem("userToken")) {
      setToken(localStorage.getItem("userToken"));
      setUsername(localStorage.getItem("username"));
    }
  };

  const logOut = (e) => {
    e.preventDefault();
    localStorage.clear();
    window.location.reload();
  };

  const toggle = () => setDropdownOpen((prevState) => !prevState);

  let isLoggedIn = localStorage.getItem("userToken");
  let user_name = localStorage.getItem("username");

  return (
    <nav className="nav-container">
      <Link className="page-title" to="/">
        <i className="fa fa-reddit" aria-hidden="true"></i>
        <p className="nav-title">FakeReddit</p>
      </Link>

      <form className="search-bar-container">
        <i className="fas fa-search"></i>
        <input
          className="search-bar"
          name="search"
          type="search"
          placeholder="Search"
        />
      </form>

      <div className="button-container">
        {isLoggedIn === null ? (
          <>
            <LoginModal updateToken={updateToken} />
            <SignupModal updateToken={updateToken} />
          </>
        ) : (
          <div></div>
        )}

        <Dropdown size="sm" isOpen={dropdownOpen} toggle={toggle}>
          <DropdownToggle className="dropdown-toggle">
            {isLoggedIn === null ? (
              <i className="fas fa-user"></i>
            ) : (
              <>
                <span>
                  <i className="fas fa-user"></i>
                </span>
                <span>
                  <p>{user_name}</p>
                </span>
              </>
            )}
          </DropdownToggle>
          <DropdownMenu right>
            <DropdownItem header>MORE STUFF</DropdownItem>
            <DropdownItem>
              <a
                id="help-tag"
                href="https://www.reddithelp.com/hc/en-us"
                target="_blank"
                rel="noopener noreferrer"
              >
                Help Center
              </a>
            </DropdownItem>
            <DropdownItem divider />
            {isLoggedIn === null ? (
              <DropdownItem>Log In / Sign Up</DropdownItem>
            ) : (
              <DropdownItem onClick={logOut}>
                <Link to="/" className="logout-button">
                  Log Out
                </Link>
              </DropdownItem>
            )}
          </DropdownMenu>
        </Dropdown>
      </div>
    </nav>
  );
};

export default Navbar;

import React，{useState}来自“React”；
导入“../../App.scss”；
进口{
下拉列表，
下拉开关，
下拉菜单，
下拉项，
}从“反应带”；
从“react router dom”导入{Link}；
从“/LoginModal”导入LoginModal；
从“/SignupModal”导入SignupModal；
常量导航栏=（）=>{
const[dropdownOpen，setDropdownOpen]=useState（false）；
const[token，setToken]=useState（“”）；
const[username，setUsername]=useState（“”）；
常量updateToken=（）=>{
if（localStorage.getItem（“userToken”））{
setToken（localStorage.getItem（“userToken”）；
setUsername（localStorage.getItem（“用户名”）；
}
};
常量注销=（e）=>{
e、 预防默认值（）；
localStorage.clear（）；
window.location.reload（）；
};
常量切换=（）=>setDropdownOpen（（prevState）=>！prevState）；
让isLoggedIn=localStorage.getItem（“userToken”）；
让user_name=localStorage.getItem（“用户名”）；
返回(
伪造的

{isLoggedIn===null(
) : (
)}
{isLoggedIn===null(
) : (
{user_name}

)}
更多的东西
{isLoggedIn===null(
登录/注册
) : (
注销
)}
);
};
导出默认导航栏；

您必须使用设置路由以将不同页面链接在一起。例如，您将有一个主页、一个登录页和一个注册页。当您单击不同的链接时，它们会呈现相应的路由。

您必须使用设置路由以将不同的页面链接在一起。例如，您将有一个主页、一个登录页和一个注册页。当您单击不同的链接时，它们会呈现相应的路由。

这不是一个不同的页面，因为组件只是一个模式。如果组件位于不同的页面上，但我希望它显示在主页上，我只会使用react router dom中的链接。LoginModule是函数还是组件？使用JSX时，必须传递一个函数作为事件处理程序。如果它是一个组件，那么为它创建一个函数，并像这样使用它，因为组件只是一个模态，所以它不是一个不同的页面。如果组件位于不同的页面上，但我希望它显示在主页上，我只会使用react router dom中的链接。LoginModule是函数还是组件？使用JSX时，必须传递一个函数作为事件处理程序。如果它是一个组件，那么就为它创建一个函数，然后像这样使用它。你可能希望你的

模态

接受一个

显示

/

打开

道具，如果它是

真的

打开，否则隐藏。你可能希望你的

模态

接受一个

显示

/

打开

道具，如果为

true

则打开，否则隐藏。