React(3)-组件之间的通信

261262次阅读

共计 2218 个字符，预计需要花费 6 分钟才能阅读完成。

先看一段代码：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="../JS/react-0.14.7/build/react.js" type="text/javascript" charset="utf-8"></script>
 <script src="../JS/react-0.14.7/build/react-dom.js" type="text/javascript" charset="utf-8"></script>
 <!--<script src="../JS/react-0.14.7/build/react-with-addons.js" type="text/javascript" charset="utf-8"></script>-->
 <!--<script src="../JS/react-0.14.7/build/react-dom-server.js" type="text/javascript" charset="utf-8"></script>-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 <!--<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>-->
 </head>

 <body>
 <div id="example"></div>
 <script type="text/babel">

var Parent = React.createClass({
 HandleClick:function(event){
 //父组件样式
 ReactDOM.findDOMNode(this).style.border = '1px solid red';
 //子组件Child的样式1
 ReactDOM.findDOMNode(this.refs.child).style.color = 'blue';
 //子组件spanChild的样式2
 this.refs.child.ChildClick(this.refs.spanChild);
 },
 spanClick:function(event){
 //子组件spanChild样式
 event.stopPropagation();
 event.preventDefault();
 event.target.style.color = 'red';
 },
 render: function() {
 var props = {
 name:this.props.name,
 ref:'child'
 };
 return (
 <div onClick = {this.HandleClick}>
 <span onClick={this.spanClick} ref="spanChild">Parent is </span>-----<Child {...props} />
 </div>
 );
 }
});

var Child = React.createClass({
 ChildClick:function(event){
 ReactDOM.findDOMNode(event).style.background = '#ccc';
 },
 render: function() {
 return (
 <span>
 {this.props.name}
 </span>
 );
 }
});


ReactDOM.render(
 <Parent name="iTattoo" />,
 document.getElementById('example')
);
 </script>
 </body>

</html>

这个组件的功能是父组件通过接受传入的用户名称，并将用户名称传递给子组件，最后在有子组件渲染出来显示在整个页面上。

1.子组件调用父组件的方法。

通过例子可以看出，子组件通过this.props方法可以与父组件通信（包括调用父组件的方法和使用父组件的属性）。

2.父组件调用子组件的方法。

通过例子可以看出，父组件通过this.refs方法可以与子组件通信（包括调用子组件的方法和使用子组件的属性）。

操作DOM的方法有两个：

findDOMNode()：当组件加载到页面上之后（mounted），你都可以通过 react-dom 提供的 findDOMNode() 方法拿到组件对应的 DOM 元素。
Refs：另外一种方式就是通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称，然后通过this.refs.name 来访问对应的 DOM 元素。

如果 ref 是设置在原生 HTML 元素上，它拿到的就是 DOM 元素，如果设置在自定义组件上，它拿到的就是组件实例，这时候就需要通过 findDOMNode 来拿到组件的 DOM 元素。