React：子组件向App.js传递并同步布尔值的实现方法

方法一：通过Props传递回调函数（基础常用方案） #

在App.js中定义状态和状态更新函数，将更新函数作为props传递给SignIn组件，子组件触发该回调函数即可同步更新App.js中的状态。

App.js 代码示例 #

import { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import SignIn from './SignIn';

function App() {
  // 定义需要同步的布尔状态
  const [isSignedIn, setIsSignedIn] = useState(false);

  // 用于子组件同步状态的回调函数
  const updateSignInStatus = (status) => {
    setIsSignedIn(status);
  };

  return (
    <Router>
      <Routes>
        <Route 
          path="/signin" 
          element={<SignIn updateSignInStatus={updateSignInStatus} currentStatus={isSignedIn} />} 
        />
      </Routes>
      {/* 可根据isSignedIn状态做页面逻辑调整，比如显示不同导航栏 */}
    </Router>
  );
}

export default App;

SignIn组件代码示例 #

import { useState } from 'react';

function SignIn({ updateSignInStatus, currentStatus }) {
  // 可选：维护组件本地状态，也可直接使用父组件传递的状态
  const [localSignedIn, setLocalSignedIn] = useState(currentStatus);

  // 示例：点击按钮切换状态并同步到App.js
  const handleToggleStatus = () => {
    const newStatus = !localSignedIn;
    setLocalSignedIn(newStatus);
    updateSignInStatus(newStatus);
  };

  return (
    <div>
      <button onClick={handleToggleStatus}>
        {localSignedIn ? '退出登录' : '登录'}
      </button>
    </div>
  );
}

export default SignIn;

方法二：使用React Context（适合多层组件共享状态） #

如果后续有多个组件需要访问该布尔状态，使用Context可以避免逐层传递props的麻烦。

1. 创建AuthContext.js #

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

// 创建上下文
const AuthContext = createContext();

// 提供上下文的包装组件
export function AuthProvider({ children }) {
  const [isSignedIn, setIsSignedIn] = useState(false);

  const updateSignInStatus = (status) => {
    setIsSignedIn(status);
  };

  return (
    <AuthContext.Provider value={{ isSignedIn, updateSignInStatus }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook，简化上下文调用
export function useAuth() {
  return useContext(AuthContext);
}

2. 修改App.js #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import SignIn from './SignIn';
import { AuthProvider } from './AuthContext';

function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/signin" element={<SignIn />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
}

export default App;

3. 修改SignIn组件 #

import { useAuth } from './AuthContext';

function SignIn() {
  const { isSignedIn, updateSignInStatus } = useAuth();

  const handleToggleStatus = () => {
    updateSignInStatus(!isSignedIn);
  };

  return (
    <div>
      <button onClick={handleToggleStatus}>
        {isSignedIn ? '退出登录' : '登录'}
      </button>
    </div>
  );
}

export default SignIn;

方法三：使用状态管理库（如Redux Toolkit，适合复杂应用） #

如果应用状态逻辑复杂、涉及多个模块共享状态，可使用Redux这类集中式状态管理工具。

1. 安装依赖 #

npm install @reduxjs/toolkit react-redux

2. 创建authSlice.js #

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  isSignedIn: false,
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    toggleSignInStatus: (state) => {
      state.isSignedIn = !state.isSignedIn;
    },
    setSignInStatus: (state, action) => {
      state.isSignedIn = action.payload;
    },
  },
});

export const { toggleSignInStatus, setSignInStatus } = authSlice.actions;
export default authSlice.reducer;

3. 创建store.js #

import { configureStore } from '@reduxjs/toolkit';
import authReducer from './authSlice';

export const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});

4. 修改App.js #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import SignIn from './SignIn';
import { Provider } from 'react-redux';
import { store } from './store';

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="/signin" element={<SignIn />} />
        </Routes>
      </Router>
    </Provider>
  );
}

export default App;

5. 修改SignIn组件 #

import { useSelector, useDispatch } from 'react-redux';
import { toggleSignInStatus } from './authSlice';

function SignIn() {
  const isSignedIn = useSelector(state => state.auth.isSignedIn);
  const dispatch = useDispatch();

  const handleToggleStatus = () => {
    dispatch(toggleSignInStatus());
  };

  return (
    <div>
      <button onClick={handleToggleStatus}>
        {isSignedIn ? '退出登录' : '登录'}
      </button>
    </div>
  );
}

export default SignIn;

可根据项目复杂度选择方案：小型项目用Props或Context即可，大型复杂项目推荐使用Redux Toolkit。

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