React组件传值与视图切换求助：登录后传递用户名至App组件

问题2：默认渲染LoginPanel，登录后切换到App视图 #

核心逻辑是将登录状态提升到共同父组件Main，通过回调函数让LoginPanel触发状态更新，实现视图切换：

1. 修改Main组件，添加状态管理与登录回调 #

import React, { useState } from "react";
import App from "./App";
import LoginPanel from "./LoginPanel";

function Main() {
  const [isLogged, setLogged] = useState(false);
  const [userName, setUserName] = useState("");

  // 处理登录的回调，接收用户名并更新状态
  const handleLogin = (name) => {
    setUserName(name);
    setLogged(true);
  };

  return (
    <div>
      {/* 根据登录状态渲染对应组件，传递回调和用户名 */}
      {!isLogged ? <LoginPanel onLogin={handleLogin} /> : <App userName={userName} />}
    </div>
  );
}

export default Main;

2. 修改LoginPanel组件，处理表单提交 #

给表单添加提交事件，阻止默认跳转，触发父组件的登录回调：

import React, { useState } from "react";

function LoginPanel({ onLogin }) { // 接收父组件传来的登录回调
  const [formData, setFormData] = useState({
    fName: "",
    password: "",
  });

  function handleChange(event) {
    const { name, value } = event.target;
    setFormData(prevValue => ({
      ...prevValue,
      [name]: value
    }));
  }

  function handleSubmit(event) {
    event.preventDefault(); // 阻止表单默认刷新行为
    // 可在此添加密码验证逻辑，示例先跳过
    if (formData.fName.trim()) {
      onLogin(formData.fName); // 传递用户名给父组件，触发登录状态更新
    }
  }

  return (
    <div className="container">
      <h1>Log In ↓</h1>
      <form onSubmit={handleSubmit}>
        <input
          onChange={handleChange}
          name="fName"
          value={formData.fName}
          placeholder="First Name"
        />
        <input
          type='password'
          name="password"
          onChange={handleChange}
          value={formData.password}
          placeholder="Password"
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default LoginPanel;

问题1：在App组件中使用登录的name值 #

通过Props传递，让Main把用户名传给App，再按需使用：

修改App组件，接收并使用用户名 #

import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

function App({ userName }) { // 接收父组件传来的用户名
  const [notes, setNotes] = useState([]);

  function addNote(newNote) {
    setNotes((prevNotes) => [...prevNotes, newNote]);
  }

  function deleteNote(id) {
    setNotes((prevNotes) => prevNotes.filter((noteItem, index) => index !== id));
  }

  return (
    <div>
      {/* 把用户名传给Header显示，或在其他逻辑中使用 */}
      <Header userName={userName} />
      <CreateArea onAdd={addNote} />
      {notes.map((noteItem, index) => (
        <Note
          key={index}
          id={index}
          title={noteItem.title}
          content={noteItem.content}
          onDelete={deleteNote}
        />
      ))}
      <Footer />
    </div>
  );
}

export default App;

示例：在Header组件中显示用户名 #

// Header.js
import React from "react";

function Header({ userName }) {
  return (
    <header>
      <h1>My Notes</h1>
      {userName && <p>Welcome, {userName}!</p>}
    </header>
  );
}

export default Header;

内容的提问来源于stack exchange，提问作者Łukasz Jasionowski