react中子组件改变父组件的state

只是简单的子组件状态提升，在react中官网中有提到
不过react真好玩(๑′ᴗ‵๑)

前言

最近在开发一个用react做前端小程序应用，由于人员缺少，自能让我这个半吊子来弄一弄前端

中间有一个功能是资料卡片的的显示，即点击按钮弹出资料卡片

首先我的设想是卡片作为一个组件被调用，然后这些都很简单，但是我遇到了一个难点，就是资料卡片的关闭状态，开始我是用父组件保存卡片的关闭打开状态，然后传入props(子组件)在子组件中用变量的值来判断卡片的显示和隐藏

说明：我采用卡片组件作为一个弹出层用样式来控制关闭和显示，而并没有采用路由整个页面的方式，不然就不会遇到这个问题了

然后子组件有一个关闭按钮，这个时候改变了状态，但是父组件并不知道，所以需要子组件给父组件通信。

方法

在react中，父组件可以通过传递 props 的方式，自顶而下向子组件进行通讯。而子组件向父组件通讯，同样也需要父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。

class Parent extends Component{
  state = {
    msg: 'start'
  };
  
  transferMsg(msg) {
    this.setState({
      msg
    });
  }

  render() {
    return <div>
        <p>child msg: {this.state.msg}</p>
        <Child_1 transferMsg = {msg => this.transferMsg(msg)} />
      </div>;
  }
}

class Child_1 extends Component{
  componentDidMount() {
    setTimeout(() => {
      this.props.transferMsg('end')
    }, 1000);
  }

  render() {
    return <div>
      <p>child_1 component</p>
    </div>
  }
}

由于箭头函数，可以保证子组件在调用transferMsg 函数时，其内部 this 仍指向父组件。
在我个人的理解中，可以算作是闭包的一种应用。

后话

其实在react官方文档就有说明：状态提升
其实这种方法可以避免双向绑定带来的坏处，只有当父组件允许的时候才能更改父组件的状态，缩小了发生bug的范围。