RN之React组件通信（五）

最新推荐文章于 2024-03-23 10:55:30 发布

回忆往事20_14

最新推荐文章于 2024-03-23 10:55:30 发布

阅读量476

点赞数

文章标签： React Native

本文链接：https://blog.csdn.net/u010083771/article/details/78021765

版权

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

回忆往事20_14

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RN之React组件通信（五）

ReactJS组件关系是一层套一层，DOM结构，组件结构比较清晰父组件子组件 React组件通信 --> var Parent=React.createClass( { handleClick:function () { //
复制链接

扫一扫