共计 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
正文完