如何访问组件内的boolean变量并批量刷新所有组件状态？

1. 状态提升（最直接方案） #

把所有子组件的pressed状态统一托管到父组件中：

• 在父组件定义allPressedStates状态，用数组存储15个子组件的pressed值（数组索引对应子组件序号）。
• 给每个子组件传递对应的pressed值和修改单个状态的回调函数。
• 需要“refresh”时，直接在父组件把allPressedStates全部重置为初始状态（比如false）。

示例代码：

// 父组件
import { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [allPressedStates, setAllPressedStates] = useState(
    Array(15).fill(false) // 初始化15个false
  );

  // 修改单个子组件状态
  const handleChildPress = (index) => {
    setAllPressedStates(prev => {
      const newStates = [...prev];
      newStates[index] = !newStates[index];
      return newStates;
    });
  };

  // 批量重置所有状态
  const handleRefresh = () => {
    setAllPressedStates(Array(15).fill(false));
  };

  return (
    <div>
      <button onClick={handleRefresh}>重置所有组件状态</button>
      {allPressedStates.map((pressed, index) => (
        <ChildComponent
          key={index}
          pressed={pressed}
          onPress={() => handleChildPress(index)}
        />
      ))}
    </div>
  );
}

// 子组件
function ChildComponent({ pressed, onPress }) {
  return (
    <div 
      className={pressed ? 'pressed' : ''}
      onClick={onPress}
    >
      {/* 组件内容 */}
    </div>
  );
}

2. React Context（适合层级较深的场景） #

如果子组件嵌套层级深，状态提升不方便，用Context全局管理状态：

• 创建Context，包含pressedStates、单个状态修改方法和批量重置方法。
• 用Provider在父组件层级注入Context值。
• 子组件通过useContext获取状态和操作方法。

示例代码：

// 创建Context及相关工具
import { createContext, useContext, useState } from 'react';

const PressContext = createContext();

export function PressProvider({ children }) {
  const [pressedStates, setPressedStates] = useState(Array(15).fill(false));

  const updatePressedState = (index, value) => {
    setPressedStates(prev => {
      const newStates = [...prev];
      newStates[index] = value;
      return newStates;
    });
  };

  const resetAllPressed = () => {
    setPressedStates(Array(15).fill(false));
  };

  return (
    <PressContext.Provider value={{ pressedStates, updatePressedState, resetAllPressed }}>
      {children}
    </PressContext.Provider>
  );
}

export function usePress() {
  return useContext(PressContext);
}

// 子组件使用
function ChildComponent({ index }) {
  const { pressedStates, updatePressedState } = usePress();
  const pressed = pressedStates[index];

  return (
    <div 
      className={pressed ? 'pressed' : ''}
      onClick={() => updatePressedState(index, !pressed)}
    >
      {/* 组件内容 */}
    </div>
  );
}

// 触发重置的组件
function ResetButton() {
  const { resetAllPressed } = usePress();
  return <button onClick={resetAllPressed}>重置所有</button>;
}

3. 状态管理库（适合大型应用） #

如果是大型项目，用Redux、Zustand这类库统一管理全局状态：

• 以Zustand为例，创建store管理所有pressed状态，包含切换单个状态和批量重置的方法。
• 子组件从store获取对应状态和操作方法。
• 需要重置时调用store的重置方法。

示例代码：

import { create } from 'zustand';

const usePressStore = create((set) => ({
  pressedStates: Array(15).fill(false),
  togglePressed: (index) => set((state) => {
    const newStates = [...state.pressedStates];
    newStates[index] = !newStates[index];
    return { pressedStates: newStates };
  }),
  resetAllPressed: () => set({ pressedStates: Array(15).fill(false) })
}));

// 子组件使用
function ChildComponent({ index }) {
  const pressed = usePressStore(state => state.pressedStates[index]);
  const togglePressed = usePressStore(state => state.togglePressed);

  return (
    <div 
      className={pressed ? 'pressed' : ''}
      onClick={() => togglePressed(index)}
    >
      {/* 组件内容 */}
    </div>
  );
}

// 重置按钮
function ResetButton() {
  const resetAllPressed = usePressStore(state => state.resetAllPressed);
  return <button onClick={resetAllPressed}>重置所有组件</button>;
}

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