React - 组件之间的通信详解（父组件与子组件互相调用对方的方法或属性）

作者：hangge | 2016-12-27 08:10

ReactJS 的思想是组件化，所以了解组件间的通信十分重要，下面通过一个小样例来演示。

一、组件通信样例

1，效果图

（1）我们创建了一个父组件，其内部调用一个子组件。父组件接受到外边的参数（hangge.com）又传递给子组件渲染显示。

（2）同时父组件上绑定了个点击事件。当父组件被点击的时候，会获取子组件元素，并将子组件元素中文字颜色改成红色。

2，样例代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>hangge</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js">
    </script>
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
      //创建子类组件
      var Child = React.createClass({
        render: function() {
            return (
                    <span>{this.props.name}</span>
            );
        },
      });

      //创建父类组件
      var Parent = React.createClass({
          render: function() {
              return (
                      <div onClick={this.click}>
                        父组件是：<Child name={this.props.name} ref="child"></Child>
                      </div>
              );
          },
          click: function() {
            ReactDOM.findDOMNode(this.refs.child).style.color = "red";
          },
      });
      ReactDOM.render(<Parent name="hangge.com" />, document.getElementById('example'));
  </script>
</body>
</html>

二、组件通信说明

1，子组件调用父组件的方法

（1）子组件要拿到父组件的属性，需要通过 this.props 方法。上面样例子组件中 this.props.name 便是从父组件拿到的 name 属性。以后每次父组件修改了传入的 name 属性，子组件便会得到通知，然后会自动获取新的 name 属性。
（2）同样地，如果子组件想要调用父组件的方法，只需父组件把要被调用的方法以属性的方式放在子组件上，子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。

2，父组件调用子组件的方法

在 ReactJS 中有个叫 ref 的属性。这个属性就像给组件起个引用名字一样，子组件被设置为 ref 之后（比如 ref="xxx"）。父组件便可以通过 this.refs.xxx 来获取到子组件了。

React / React Native