如何将我的登录组件集成到导航栏中？（附代码）

Question

我是一名新程序员，最近开始学习音乐播放器教程，但遇到了一些问题。

项目概况：

到目前为止我所拥有的：如前所述，它是一个使用 create-react-app 制作的音乐播放器项目。 它有 4 个播放列表， persian 、 rock 、 turkish和house ，它们都有各自独立的可路由.js页面。 该应用程序的结构使得所有页面路由都嵌套在 Navbar 组件中。

除了 Navbar 和 Playlist.js 组件，我还创建了 LoginHandler.js 和 LoginForm.js 组件。

LoginForm.js是子组件，作为表单的整体外观，只是一个基本的样式模板。 它还根据其基本逻辑集成了诸如onSubmit之类的属性。

LoginHandler.js是父组件，用作整个登录/注销逻辑，并提供基本身份验证。 目标是让用户能够登录，如果成功，它将在控制台上显示“Logged In”。 如果有错误或不成功，它将记录“详细信息不匹配”。（我附上了下面的代码）。

问题：

我在将父登录组件 (LoginHandler.js) 集成到 Navbar 组件时遇到问题。 目标是让 Navbar 组件有一个有效的登录组件，嵌套在它的右侧。 （见下图）。 我如何才能将登录组件集成到NavbarA组件中？

笔记：

（请更正我的代码并使用我在下面提供的代码提供解决方案示例。由于我的新手技能，我不熟悉任何复杂的术语）

谢谢你： ：）

代码：

NavbarA.js （导航栏组件/路由所在的位置）

import React, { Component } from 'react';
import { Navbar,Nav, Container } from 'react-bootstrap';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
  } from "react-router-dom";
  import Home from './Home';
  import About from './About';
  import Persian from './Persian';
  import House from './House';
  import Turkish from './Turkish';
  import Rock from './Rock';

export default  class NavbarA extends Component {
  render() {
    return (
      <>
        <div>
          <Navbar bg="dark" variant={"dark"} expand="lg">
            <Container>
              <Navbar.Brand as={Link} to="/">
                <img
                  src={process.env.PUBLIC_URL + "/spotifly.png"}
                  alt="logo"
                />
              </Navbar.Brand>
              <Navbar.Brand />
              <Navbar.Toggle aria-controls="basic-navbar-nav" />
              <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="me-auto">
                  <Nav.Link as={Link} to={"/"}>
                    Home
                  </Nav.Link>
                  <Nav.Link as={Link} to={"/about"}>
                    About
                  </Nav.Link>
                </Nav>
              </Navbar.Collapse>
            </Container>
          </Navbar>
        </div>
        <div>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/persian" element={<Persian />} />
            <Route path="/house" element={<House />} />
            <Route path="/turkish" element={<Turkish />} />
            <Route path="/rock" element={<Rock />} />
          </Routes>
        </div>
      </>
    );
  }
}

LoginHandler.js （登录逻辑和基本身份验证）

import React, {  useState } from "react";

import LoginForm from "./LoginForm";

function LoginHandler() {
  const adminUser = {
        name: "admin" ,
        email: "admin@admin.com" ,
        password: "admin123"
      };

  const [user, setUser] = useState({ name: "", email: "" });
  const [error, setError] = useState("");

  const Login = (details) => {
    console.log(details);

    if (
      details.email === adminUser.email &&
      details.password === adminUser.password
    ) {
      console.log("Logged In");
      setUser({
        name: details.name,
        email: details.email
      });
    } else {
      console.log("Details Do Not Match");
      setError("Details Do Not Match!");
    }
  };

  const Logout = () => {
    console.log("Logout");
    setUser({ name: "", email: "" });
  };
  return (
    <div className="App">
      {user.email !== "" ? (
        <div className="Welcome">
          <h2>
            Welcome, <span>{user.name}</span>{" "}
          </h2>
          <button onClick={Logout}>Logout</button>
        </div>
      ) : (
        <LoginForm Login={Login} error={error} />
      )}

      <div></div>
    </div>
  );
}

export default LoginHandler;

LoginForm.js *（登录表单和基本逻辑）*

import React, { useState } from "react";

function LoginForm({ Login, error }) {
  const [details, setDetails] = useState({ name: "", email: "", password: "" });

  const submitHandler = (e) => {
    e.preventDefault();
    Login(details);
  };

  return (
    <form onSubmit={submitHandler}>
      <div className="form-inner">
        <h2>Login</h2>
        {error != "" ? <div className="error">{error}</div> : ""}

        <div className="form-group">
          <label htmlFor="name"> Name</label>
          <input
            type="text"
            name="name"
            id="name"
            onChange={(e) => setDetails({ ...details, name: e.target.value })}
            value={details.name}
          />
        </div>
        <div className="form-group">
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            name="email"
            id="email"
            onChange={(e) => setDetails({ ...details, email: e.target.value })}
            value={details.email}
          />
        </div>
        <div className="form-group">
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            name="password"
            id="password"
            onChange={(e) =>
              setDetails({ ...details, password: e.target.value })
            }
            value={details.password}
          />
        </div>
        <input type="submit" value="LOGIN" />
      </div>
    </form>
  );
}

export default LoginForm;

应用程序.js

function App() {
  return (
    <div className="App">

      <Router>
        <NavbarA/>
      </Router>
      <div>
    
      </div>
    </div>
  );
}

export default App;

让我知道你的想法！

谢谢，

-Zpo

Answer 1

有点不清楚您面临的问题是出现错误还是纯粹是定位问题。

如果纯粹是定位问题，以下内容可能会有所帮助：

 .space-between { justify-content: space-between; }

 <Nav className="me-auto space-between"> <div> <Nav.Link as={Link} to={ '/'}> Home </Nav.Link> <Nav.Link as={Link} to={ '/about'}> About </Nav.Link> </div> <div> <LoginHandler /> </div> </Nav>