React - 组件之间的通信详解(父组件与子组件互相调用对方的方法或属性)
ReactJS 的思想是组件化,所以了解组件间的通信十分重要,下面通过一个小样例来演示。
(2)同样地,如果子组件想要调用父组件的方法,只需父组件把要被调用的方法以属性的方式放在子组件上,子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。
一、组件通信样例
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 来获取到子组件了。