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

Question

我正在编写一个由大正方形网格组成的应用程序。每个方块（或单元格）都维持自己的状态。单击单个单元格会更改其颜色（单元格使用 useState()）

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

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

任何建议都非常接受！

Answer 1

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

示例演示

class Child extends React.Component {
   state = {
      counter: 0
   }
   render() {
    return (
      <div>{this.state.counter}<button onClick={() => this.setState(prev => ({counter: prev.counter+1}))}>Increment</button></div>
    )
   }
}
class App extends React.Component{
 state = {
  elemKey: 0,
 }
 
 render() {
  return (
   <React.Fragment>
    <div key={this.state.elemKey}>
      {[...Array.from(new Array(10))].map((item, index) => {
         return <Child key={index} />
      })}
    </div>
    <button onClick={() => {this.setState(prev => ({elemKey: (prev.elemKey + 1)%2}))}}>Reset</button>
   </React.Fragment>
  )
 }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>