Reactjs 父组件如何重置React中的多个子组件

我正在写一个应用程序，它由一个巨大的正方形网格组成。每个正方形（或单元）保持其自身的状态。单击单个单元格会更改其颜色（该单元格使用useState（）

我想要一个重置按钮，将所有单元格设置回初始状态，即白色

我不知道如何让这个按钮改变所有单元格的状态。单元的数量可以在121到529之间变化（取决于所选的布局大小）

---

我完全接受任何建议

您可以使用

上下文

并将所有

单元格

包装在

上下文.提供者

中，然后在

单元格

中使用效果钩子侦听上下文的结果如果上下文发生更改，您可以将每个单元格的状态更改为其初始状态，如下所示：

//in resetContext.js

const ResetContext = React.createContext();

const useResetContext = () => React.useContext(resetContext);

//in resetContextProvider.js

const ResetContextProvider = () => {
  const [reset, setReset] = React.useState(false);
  const providerValue = {reset, setReset}

  return (
    <ResetContext.Provider value={providerValue}>
      //put your Cells in here
    </ResetContext.Provider>
  )
}

// in Cells

const initialValue = 'something';

const Cell = () => {
  const [cellState, setCellState] = React.useState(initialValue)
  const resetObj = useResetContext();

  React.useEffect(() => {
    if(reset){
      setCellState(initialValue)
    }
  }, [resetObj])

  return <div /> // or whatever your components are
}

//在resetContext.js中
const ResetContext=React.createContext（）；
const useResetContext=（）=>React.useContext（resetContext）；
//在resetContextProvider.js中
const ResetContextProvider=（）=>{
const[reset，setReset]=React.useState（false）；
const providerValue={reset，setReset}
返回(
//把你的手机放在这里
)
}
//在牢房里
const initialValue='something'；
常量单元格=（）=>{
常量[cellState，setCellState]=React.useState（初始值）
const resetObj=useResetContext（）；
React.useffect（（）=>{
如果（重置）{
setCellState（初始值）
}
}，[resetObj]）
return//或任何组件
}

最简单的解决方案是实际更改网格元素公共父元素的键，该键强制所有子元素重新装载，并重置其所有状态

示例演示

类子级扩展React.Component{
状态={
柜台:0
}
render（）{
返回(
{this.state.counter}this.setState（prev=>（{counter:prev.counter+1}））}>增量
)
}
}
类应用程序扩展了React.Component{
状态={
艾伦基:0,，
}
render（）{
返回(
{[…数组.from（新数组（10））].map（（项，索引）=>{
返回
})}
{this.setState（prev=>（{elemKey:{prev.elemKey+1）%2}））}>Reset
)
}
}
ReactDOM.render（，document.getElementById（'app'））

请提供一个如何构建网格的示例代码。使用道具更改子级中的状态，如果道具更改，则会导致重新渲染每个组件都必须负责其自身的状态。如果要从父组件重置每个正方形的状态，这可能意味着该状态归父组件所有，并应通过属性转发给子组件。因此，您的方形组件将变为从属和无状态，并且只有父组件才会有状态。我不确定如何让父组件为如此多的子组件维护状态？提升状态，将函数传递给子组件以操纵状态。见：