ReactJS学习笔记-父子组件间的通信
Posted S1ow
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ReactJS学习笔记-父子组件间的通信相关的知识,希望对你有一定的参考价值。
过去、现在、未来的每一天,组成了我们的故事。认真对待,都是美好的。
React组件间的通信分为三种情况:
1、子组件调用父组件,采用props的方式进行调用和赋值,在父组件中设置相关属性值或者方法,子组件通过props的方式进行属性赋值或者方法调用;
2、父组件调用子组件,采用refs的方式进行调用,需要父组件在调用子组件的时候,添加ref属性,并进行唯一命名,在父组件中即可调用;
3、使用全局事件 Pub/Sub 模式,在 componentDidMount 里面订阅事件,在 componentWillUnmount 里面取消订阅,当收到事件触发的时候调用 setState 更新 UI。(这里暂时没有学习)
子组件调用父组件
- 创建一个简单组件ButtonComment,调用此组件是需传递参数buttonName,并创建初始化方法getInitialState及点击事件sendSword :
var ButtonComment = React.createClass(
getInitialState: function ()
return count:0;
,
//点击发宝刀。。。
sendSword: function ()
var newCount = this.state.count + 1;
this.setState( count:newCount );
//通过props调用父组件的方法
this.props.getSwordCount(newCount );
,
render: function ()
return (
<button onClick=this.sendSword>this.props.buttonName</button>
);
);
点击按钮,将会调用sendWord方法,更改count的状态,并调用父组件的方法getSwordCount,这时将会重新渲染页面,如果不想重新渲染请重写方法shouldComponentUpdate: function (nextProps,nextState)并返回false即可。
- 创建一个父组件ImDaddyComponent,并将属性buttonName及方法getSwordCount传递给子组件ButtonComment:
var ImDaddyComponent = React.createClass(
getInitialState: function ()
return sendCount:0;
,
getSwordCount: function (newCount)
this.setState(sendCount:newCount);
,
render: function ()
return (
<div>
<ButtonComment getSwordCount=this.getSwordCount buttonName="儿子送宝刀"/>
<p>
父子俩共送this.state.sendCount把宝刀!!!
</p>
</div>
);
);
- 进行页面的渲染,点击”儿子送宝刀”按钮时,将会计算送宝刀数量,并通过this.props.getSwordCount(newCount );传递给父组件,更改state属性值。
React.render(
<ImDaddyComponent />,
document.getElementById('index-0331-0011')
);
以上就完成了子组件调用父组件的属性及方法。
父组件调用子组件
- 要调用子组件的方法或者属性,需要在调用子组件的时候定义ref属性,且唯一,更新ImDaddyComponent 如下:
var ImDaddyComponent = React.createClass(
getInitialState: function ()
return sendCount:0;
,
//通过refs方式调用子组件的方法sendSword
sendSword: function ()
this.refs.getSwordButton.sendSword();
,
getSwordCount: function ()
//通过refs方式调用子组件的属性count
this.setState(sendCount:this.refs.getSwordButton.state.count + 1);
,
render: function ()
return (
<div>
//此处需要定义ref属性,且值唯一
<ButtonComment ref="getSwordButton" getSwordCount=this.getSwordCount buttonName="儿子送宝刀"/>
<button onClick=this.sendSword>通过老爸送宝刀</button>
<p>
父子俩共送this.state.sendCount把宝刀!!!
</p>
</div>
);
);
以上,就完成父组件调用子组件。
完整代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../dist/react/react.js"></script>
<script src="../../dist/react/JSXTransformer.js"></script>
<script src="../../dist/jquery/jquery.min.js"></script>
<!--如下的这种引用方式是不正确的,必须使用上面的引用方式-->
<!--<script src="../../dist/react/JSXTransformer.js"/>-->
</head>
<body>
<div id="index-0331-0011"></div>
<script type="text/jsx">
var ButtonComment = React.createClass(
getInitialState: function ()
return count:0;
,
sendSword: function ()
var newCount = this.state.count + 1;
this.setState(count:this.state.count + 1);
this.props.getSwordCount();
,
render: function ()
return (
<button onClick=this.sendSword>this.props.buttonName</button>
);
);
var ImDaddyComponent = React.createClass(
getInitialState: function ()
return sendCount:0;
,
sendSword: function ()
this.refs.getSwordButton.sendSword();
,
getSwordCount: function ()
this.setState(sendCount:this.refs.getSwordButton.state.count + 1);
,
render: function ()
return (
<div>
<ButtonComment ref="getSwordButton" getSwordCount=this.getSwordCount buttonName="儿子送宝刀"/>
<button onClick=this.sendSword>通过老爸送宝刀</button>
<p>
父子俩共送this.state.sendCount把宝刀!!!
</p>
</div>
);
);
React.render(
<ImDaddyComponent />,
document.getElementById('index-0331-0011')
);
</script>
</body>
</html>
以上是关于ReactJS学习笔记-父子组件间的通信的主要内容,如果未能解决你的问题,请参考以下文章