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上
运行结果:
阅读全文
0 0
- React.js refs 和props传递数据
- react数据传递----props
- 续-React数据传递-props
- React传递Props
- React传递props
- vue.js使用props传递数据
- Vue.js学习笔记:props传递数据
- vue.js之props传递数据
- React删除props数据
- react——传递 Props
- props数据传递
- 正确使用react的refs/props/state及其它
- 关于Vue.js的组件化,使用props传递数据
- React.js--this.props.children
- 浅谈React的props验证、默认值、传递
- React Native State和Props
- [React-Native]Props和State
- React中的props和state
- 人脸定位程序及结果
- 将datagrid表格数据导出为Excel(动态列)
- 计算语音识别结果编辑距离的开源软件:sclite的编译、安装与运行
- 《产品的视角》- 书摘整理
- 二分查找的次数
- React.js refs 和props传递数据
- 【HDU
- linux系统下如何对用户进行赋权操作。
- F
- java MD5加密算法返回数字型字符串
- Nexus私人仓库的 创建和使用
- 获取公网IP地址
- 优秀文章-链接
- 总结Hbase 与 MongoDB