RN之React组件通信五

ReactJS组件关系是一层套一层，DOM结构，组件结构比较清晰

父组件

子组件

<!DOCTYPE html>
<html>
  <head lang="en">
    <Meta charset="UTF-8" />
    <title>React组件通信</title>
      <script src="react.js"></script>
    <script src="react-dom.js"></script>
  <!--  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>-->
    <script type="text/javascript" src="browser.min.js"></script>
  </head>
  <body>
  <div id="example"></div>
  <script type="text/babel">
    
    var Parent=React.createClass(
        {
            handleClick:function () {
        //this.refs.child,getDOMNode().style.color="red";
                ReactDOM.findDOMNode(this.refs.child).style.color="green";
        },render:function () {
               return ( <div onClick ={this.handleClick}>Parent is:
                <Child name={this.props.name} ref="child"></Child>
                </div>
               );
            }
    }
    );
    var Child=React.createClass({
        render:function () {
            return <span>{this.props.name}</span>;
        }
    });
    ReactDOM.render(<Parent name="拉时空的"/>,document.getElementById("example"));
  </script>
  </body>
</html>

 1.父组件如何调用子组件
   注意：React 15+
this.refs.名字,getDOMNode()改为ReactDOM.findDOMNode(this.refs.名字)

2.子组件如何调用父组件

this.props

RN之React组件通信五

相关文章