React：如何将Login子组件的用户信息传递给App.js？

下面提供三种实用方案，根据项目复杂度选择适合的方式：

方法一：状态提升（Props + 回调函数） #

适合简单层级的信息传递，通过路由组件中转回调函数，实现Login向App的信息回传。

1. App.js 维护状态并定义更新函数 #

import { useState } from 'react';
import Router from './Router';

function App() {
  // 初始化硬编码用户信息，后续动态更新
  const [tUserInfo, setTUserInfo] = useState({
    name: '默认用户',
    avatar: '/default-avatar.png'
  });

  // 接收Login组件传递的用户信息并更新状态
  const updateUserInfo = (userInfo) => {
    setTUserInfo(userInfo);
  };

  return (
    <div className="App">
      {/* 用户图标展示，绑定动态状态 */}
      <div className="user-avatar">
        <img src={tUserInfo.avatar} alt={tUserInfo.name} />
        <span>{tUserInfo.name}</span>
      </div>
      {/* 将更新函数传递给路由组件 */}
      <Router onUserLogin={updateUserInfo} />
    </div>
  );
}

export default App;

2. Router.js 中转回调给Login组件 #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './Login';
// 导入其他路由组件

function AppRouter({ onUserLogin }) {
  return (
    <Router>
      <Routes>
        {/* 把回调函数作为props传给Login */}
        <Route path="/login" element={<Login onLoginSuccess={onUserLogin} />} />
        {/* 其他路由配置 */}
      </Routes>
    </Router>
  );
}

export default AppRouter;

3. Login.js 登录成功后调用回调传递信息 #

import { useState } from 'react';
import axios from 'axios';

function Login({ onLoginSuccess }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      // 调用登录接口获取用户信息
      const res = await axios.post('/api/login', { username, password });
      const userInfo = res.data;
      
      // 触发回调，把用户信息传给App.js
      onLoginSuccess(userInfo);
      
      // 登录成功跳转首页
      window.location.href = '/';
    } catch (err) {
      console.error('登录失败:', err);
    }
  };

  return (
    <div className="login-form">
      <input 
        type="text" 
        value={username} 
        onChange={(e) => setUsername(e.target.value)} 
        placeholder="用户名"
      />
      <input 
        type="password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
        placeholder="密码"
      />
      <button onClick={handleLogin}>登录</button>
    </div>
  );
}

export default Login;

方法二：Context API（多组件共享场景） #

如果项目中有多个组件需要访问用户信息，用Context可以避免逐层传递props的麻烦。

1. 创建UserContext.js #

import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

// 提供Context的Provider组件
export function UserProvider({ children }) {
  const [tUserInfo, setTUserInfo] = useState({
    name: '默认用户',
    avatar: '/default-avatar.png'
  });

  const updateUserInfo = (userInfo) => {
    setTUserInfo(userInfo);
  };

  return (
    <UserContext.Provider value={{ tUserInfo, updateUserInfo }}>
      {children}
    </UserContext.Provider>
  );
}

// 自定义Hook简化Context调用
export function useUser() {
  return useContext(UserContext);
}

2. App.js 包裹Provider #

import { UserProvider, useUser } from './UserContext';
import Router from './Router';

// 封装用户图标组件，直接读取Context数据
function UserAvatar() {
  const { tUserInfo } = useUser();
  return (
    <div className="user-avatar">
      <img src={tUserInfo.avatar} alt={tUserInfo.name} />
      <span>{tUserInfo.name}</span>
    </div>
  );
}

function App() {
  return (
    <UserProvider>
      <div className="App">
        <UserAvatar />
        <Router />
      </div>
    </UserProvider>
  );
}

export default App;

3. Login.js 调用Context更新函数 #

import { useState } from 'react';
import axios from 'axios';
import { useUser } from './UserContext';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const { updateUserInfo } = useUser();

  const handleLogin = async () => {
    try {
      const res = await axios.post('/api/login', { username, password });
      updateUserInfo(res.data);
      window.location.href = '/';
    } catch (err) {
      console.error('登录失败:', err);
    }
  };

  return (
    <div className="login-form">
      {/* 表单内容同前 */}
    </div>
  );
}

export default Login;

方法三：路由跳转传递状态（临时场景） #

适合仅登录跳转时传递信息的简单场景，但页面刷新后状态会丢失，不依赖持久化的情况可以用。

Login.js 跳转时携带状态 #

import { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleLogin = async () => {
    try {
      const res = await axios.post('/api/login', { username, password });
      // 跳转首页并携带用户信息
      navigate('/', { state: { userInfo: res.data } });
    } catch (err) {
      console.error('登录失败:', err);
    }
  };

  return (
    <div className="login-form">
      {/* 表单内容同前 */}
    </div>
  );
}

App.js 接收路由状态并更新 #

import { useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';

function App() {
  const [tUserInfo, setTUserInfo] = useState({
    name: '默认用户',
    avatar: '/default-avatar.png'
  });
  const location = useLocation();

  useEffect(() => {
    // 读取路由携带的用户信息并更新状态
    if (location.state?.userInfo) {
      setTUserInfo(location.state.userInfo);
    }
  }, [location]);

  return (
    {/* 用户图标展示 */}
  );
}

内容的提问来源于stack exchange，提问作者SM079