React父子组件通信问题

Question

结构如上，每个子计数器是子组件，总计数器和重置是父组件，现在我想点击重置的时候呢所有的子计数器都回到自己的初始值，请问应该怎么做？

Answer 1

泻药！
直接上代码：

import React from 'react';

class Parent extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      children1Value: 0,
      children2Value: 0,
    };
  }

  render() {
    const {children1Value, children2Value} = this.state;
    return (
      <div>
        <Children1 value={children1Value} setValue={v => this.setState({children1Value: v})}/>
        <Children2 value={children2Value} setValue={v => this.setState({children2Value: v})}/>
        <button onClick={() => resetValue()}>重置</button>
      </div>
    );
  }

  resetValue(){
    this.setState({children1Value: 0, children2Value: 0})
  }
}

const Children1 = ({value, setValue}) => {
  return (
    <div onClick={() => setValue(value + 1)}>{value}</div>
  );
};
const Children2 = ({value, setValue}) => {
  return (
    <div onClick={() => setValue(value + 1)}>{value}</div>
  );
};

其他的，按照这个思路改改就可以了。

Answer 2

状态提升，将父组件的状态作为属性分发到各个子组件，
建议先看下文档，上面有这类问题的说明
链接描述