react中父子通信的方式

这几天在整理react的基础知识，记录一下react中父子通讯的方式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
</head>

<body>
    <div id="example">

    </div>
    <script type="text/babel">
        var MyButton = React.createClass({
          handleClick:function(){
              //console.log('去'+this.props.btnName)
              this.props.func('子1传父的消息','子2传父的消息');
          },
          render: function(){
              return <button onClick={this.handleClick}>{this.props.btnName}</button>
          }
      })

      var MyContainer = React.createClass({
          handleSubmit:function(msg1,msg2){
              console.log('我是子1',msg1)
          },
          handleClear:function(msg1,msg2){
              console.log('我是子2',msg2)
          },
          render: function(){
              return <div>
                <MyButton btnName="子按钮1" func={this.handleSubmit}></MyButton>
                <MyButton btnName="子按钮2" func={this.handleClear}></MyButton>
              </div>
          }
      })
      ReactDOM.render(
          <MyContainer></MyContainer>,
          document.getElementById('example')
      );
    </script>
</body>

</html>
react中父子通信的方式

悦读
