React中如何将一个组件的state变量传递到另一个组件？

场景与现有代码 #

问题描述 #

我有SignIn.js和Target.js两个React组件（已导入所有必要依赖），需要把SignIn组件里的username状态变量传递给Target组件，该怎么做？

现有组件代码 #

SignIn.js

// SignIn.js
function SignIn() {
   const [username, setUsername] = useState('Mickey')
   if (/* condition if true */) {
      setUsername('Mickey Mouse');
   }
   return(
      <div><h1>{username}</h1></div>
   )
}
export default SignIn;

Target.js

// Target.js
function Target() {
    return(
      <div><h1>Hello</h1></div>
   )
}
export default Target;

解决方案 #

根据两个组件的层级关系，提供以下几种可行方案：

1. 父子组件关系（SignIn直接渲染Target） #

如果SignIn是Target的父组件，直接通过props传递状态即可，同时修复原代码中会导致无限重渲染的问题：

修改后的SignIn.js：

// SignIn.js
import Target from './Target';
import { useState, useEffect } from 'react';

function SignIn() {
   const [username, setUsername] = useState('Mickey')

   // 用useEffect避免直接在函数体调用setState导致的无限重渲染
   useEffect(() => {
     if (/* 你的判断条件 */) {
       setUsername('Mickey Mouse');
     }
   }, []);

   return(
      <div>
        <h1>{username}</h1>
        <Target username={username} /> {/* 将username作为props传入Target */}
      </div>
   )
}
export default SignIn;

修改后的Target.js：

// Target.js
function Target({ username }) { // 接收props
    return(
      <div><h1>Hello, {username}</h1></div>
   )
}
export default Target;

2. 兄弟/跨层级组件关系 #

如果两个组件没有直接父子关系，使用React Context实现全局状态共享是最佳选择：

第一步：创建Context文件

// UserContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const UserContext = createContext();

// 提供状态的Provider组件
export function UserProvider({ children }) {
  const [username, setUsername] = useState('Mickey');

  useEffect(() => {
    if (/* 你的判断条件 */) {
      setUsername('Mickey Mouse');
    }
  }, []);

  return (
    <UserContext.Provider value={{ username }}>
      {children}
    </UserContext.Provider>
  );
}

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

第二步：在共同父组件中挂载Provider

比如在根组件App.js中：

// App.js
import { UserProvider } from './UserContext';
import SignIn from './SignIn';
import Target from './Target';

function App() {
  return (
    <UserProvider>
      <SignIn />
      <Target />
    </UserProvider>
  );
}

第三步：在Target中读取状态

// Target.js
import { useUser } from './UserContext';

function Target() {
  const { username } = useUser();
    return(
      <div><h1>Hello, {username}</h1></div>
   )
}
export default Target;

3. 大型项目备选：状态管理库 #

如果项目规模较大，需要在多个组件间共享复杂状态，可以使用Redux、Zustand或Jotai这类状态管理库，将username存入全局状态，SignIn负责更新状态，Target负责读取状态。

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