RN之React组件通信（五）

发布时间：2020-12-15 06:48:54 所属栏目：百科来源：网络整理

导读：ReactJS组件关系是一层套一层，DOM结构，组件结构比较清晰父组件子组件 !DOCTYPE htmlhtml head lang="en" meta charset="UTF-8" / titleReact组件通信/title script src="react.js"/script script src="react-dom.js"/script !-- script src="https://unp

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!