您的位置:首页 > Web前端 > React

React.js refs 和props传递数据

2017-07-31 17:24 399 查看
import React from 'react';
import { Button} from 'antd';

///子组件
var HelloMessage = React.createClass({
childMethod: function(){
alert("组件之间通信成功");
},
render: function() {
return <div> <h1>Hello {this.props.name}</h1> <Button onClick={this.childMethod}>子组件</Button></div>
}
});

//父组件
var ImDaddyComponent = React.createClass({
getDS: function(){
//调用组件进行通信
this.refs.getButton.childMethod();
},
render: function(){
return (
<div>
<HelloMessage name="John" ref="getButton" />
<Button onClick={this.getDS}>父组件</Button>
</div>
);
}
});

export default class Home extends React.Component {
render() {
return (
<ImDaddyComponent/>
);
}
}


点击父组件按钮可以调用到子组件的方法,

<HelloMessage name="John" ref="getButton" />


通过{this.props.name},name被传递到了HelloMessage上

运行结果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: