React.js refs 和props传递数据

来源:互联网 发布:软件测试的作用 编辑:程序博客网 时间:2024/05/24 06:20
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上

运行结果:
这里写图片描述

原创粉丝点击