使用React.cloneElement()给子组件传值
React提供了一个克隆组件的API:
React.cloneElement(
element,
[props],
[...child]
)
可以利用该方法,给子组件传值,使用如下:
class Parent extends Component{
constructor(){
super();
this.state = {
count: 1
};
}
getChildren(){
const _this = this;
let { children } = _this.props;
return React.Children.map(children, child => {
return React.cloneElement(child, {
count: _this.state.count
});
});
}
handleClick(){
this.setState({
count: this.state.count
});
}
render(){
return (
<div>
<button onClick={ this.handleClick.bind(this) }>点击增加次数</button>
{ this.getChildren() }
</div>
)
}
}
class Child extends Component{
render(){
return (
<div>
这是子组件:{ this.props.count }
</div>
)
}
}
class Test extends Component{
render(){
return (
<Parent>
<Child />
</Parent>
)
}
}
点击父组件中的按钮,子组件中的数字会增加。父组件成功向子组件传值。
注意:
如果写成下面这样则无法传值:
class Test extends Component{
render(){
return (
<Parent>
<div>
这是子组件:{ this.props.count }
</div>
</Parent>
)
}
}
本文转载自:https://blog.csdn.net/csm0912/article/details/85244970
使用React.cloneElement()给子组件传值的更多相关文章
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- react 父组件 向 子组件 传值
父组件 import React, { Component } from 'react'; import Test from './component/test'; //声明welcome组件 cla ...
- React学习笔记(三) 组件传值
组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...
- Vue-组件嵌套之——父组件向子组件传值
父组件向子组件传值步骤: 在这里先定义一下,相对本案例来说:App.vue是父组件,Second-module.vue是子组件. 一.首先,值肯定是定义在父组件中的,供所有子组件共享.所以要在父组件的 ...
- vue 父组件给子组件传值,子组件给父组件传值
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- Vue-父子组件传值
在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递.一.父组件向子组件传值 使用 Prop 传递数据,父组件的数据需要通过 prop 才能下发到子组件中,子组件要显式地用 pr ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
随机推荐
- django通用权限控制框架
在web项目中根据不同的用户肯定会限制其不同的权限,利用以下模块可以满足日常几乎所有的权限控制 permission_hook.py # 自定义权限控制,必须返回True/false ,True表 ...
- LB层到Real Server之间访问请求的响应时间及HTTP状态码监控及报警设置
为了监控到各业务的访问质量,基于LB层的Nginx日志,实现LB层到Real Server之间访问请求的响应时间(即upstream_response_time)及HTTP状态码(即upstream_ ...
- 分布式监控系统Zabbix--完整安装记录 -添加web页面监控
通过zabbix做web监控,不仅仅可以监控到站点的响应时间,还可以根据站点返回的状态码或响应时间做报警设置,比如说对某个url进行监控,当访问返回的状态码是非200状态时都报警(创建触发器即可).下 ...
- 常见IP端口
21端口:21端口主要用于FTP(File Transfer Protocol,文件传输协议)服务. 23端口:23端口主要用于Telnet(远程登录)服务,是Internet上普遍采用的登录和仿真程 ...
- Linux系统知识汇总
1 系统相关 1.1 静态IP地址配置 Ubuntu配置和修改IP地址 1.2 Linux内核升级和降级 内核升级 Linux升级内核的正确姿势 内核降级 Ubuntu 16.04 内核降级 1.3 ...
- Docker for windows 入门三(PowerShell命令使用)
- Windows10 RedStone 1使用Bash体验
很多年前,记得在Windows Server2008的Feature里发现了Windows Subsystem For Unix,当时也不知道干啥用的,还以为是Samba协议用的呢. 今天,发现Win ...
- ODBC 驱动程序管理器 在指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配 解决方案
程序报错如下: ---------------------------Microsoft 数据链接错误---------------------------测试连接失败,因为初始化提供程序时发生错误. ...
- ASP.NET MVC自定义异常处理
1.自定义异常处理过滤器类文件 新建MyExceptionAttribute.cs异常处理类文件
- zip 与 unzip的简单使用
先看help Copyright (c) - Info-ZIP - Type 'zip "-L"' for software license. Zip ). Usage: zip ...