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

245246次阅读
没有评论

共计 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操作

操作DOM的方法有两个:

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

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

总结

  • 你可以使用 ref 到的组件定义的任何公共方法,比如 this.refs.myTypeahead.reset()
  • Refs 是访问到组件内部 DOM 节点唯一可靠的方法
  • Refs 会自动销毁对子组件的引用(当子组件删除时)

注意事项

  • 不要在 render 或者 render 之前访问 refs
  • 不要滥用 refs,比如只是用它来按照传统的方式操作界面 UI:找到 DOM -> 更新 DOM

 

正文完
 0
Chou Neil
版权声明:本站原创文章,由 Chou Neil 于2016-08-15发表,共计2218字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。