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()给子组件传值的更多相关文章

  1. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  2. react 父组件 向 子组件 传值

    父组件 import React, { Component } from 'react'; import Test from './component/test'; //声明welcome组件 cla ...

  3. React学习笔记(三) 组件传值

    组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...

  4. Vue-组件嵌套之——父组件向子组件传值

    父组件向子组件传值步骤: 在这里先定义一下,相对本案例来说:App.vue是父组件,Second-module.vue是子组件. 一.首先,值肯定是定义在父组件中的,供所有子组件共享.所以要在父组件的 ...

  5. vue 父组件给子组件传值,子组件给父组件传值

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...

  6. Vue 组件&组件之间的通信 之 父组件向子组件传值

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...

  7. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  8. Vue-父子组件传值

    在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递.一.父组件向子组件传值 使用 Prop 传递数据,父组件的数据需要通过 prop 才能下发到子组件中,子组件要显式地用 pr ...

  9. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

随机推荐

  1. django通用权限控制框架

    在web项目中根据不同的用户肯定会限制其不同的权限,利用以下模块可以满足日常几乎所有的权限控制 permission_hook.py  # 自定义权限控制,必须返回True/false  ,True表 ...

  2. LB层到Real Server之间访问请求的响应时间及HTTP状态码监控及报警设置

    为了监控到各业务的访问质量,基于LB层的Nginx日志,实现LB层到Real Server之间访问请求的响应时间(即upstream_response_time)及HTTP状态码(即upstream_ ...

  3. 分布式监控系统Zabbix--完整安装记录 -添加web页面监控

    通过zabbix做web监控,不仅仅可以监控到站点的响应时间,还可以根据站点返回的状态码或响应时间做报警设置,比如说对某个url进行监控,当访问返回的状态码是非200状态时都报警(创建触发器即可).下 ...

  4. 常见IP端口

    21端口:21端口主要用于FTP(File Transfer Protocol,文件传输协议)服务. 23端口:23端口主要用于Telnet(远程登录)服务,是Internet上普遍采用的登录和仿真程 ...

  5. Linux系统知识汇总

    1 系统相关 1.1 静态IP地址配置 Ubuntu配置和修改IP地址 1.2 Linux内核升级和降级 内核升级 Linux升级内核的正确姿势 内核降级 Ubuntu 16.04 内核降级 1.3 ...

  6. Docker for windows 入门三(PowerShell命令使用)

  7. Windows10 RedStone 1使用Bash体验

    很多年前,记得在Windows Server2008的Feature里发现了Windows Subsystem For Unix,当时也不知道干啥用的,还以为是Samba协议用的呢. 今天,发现Win ...

  8. ODBC 驱动程序管理器 在指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配 解决方案

    程序报错如下: ---------------------------Microsoft 数据链接错误---------------------------测试连接失败,因为初始化提供程序时发生错误. ...

  9. ASP.NET MVC自定义异常处理

    1.自定义异常处理过滤器类文件 新建MyExceptionAttribute.cs异常处理类文件

  10. zip 与 unzip的简单使用

    先看help Copyright (c) - Info-ZIP - Type 'zip "-L"' for software license. Zip ). Usage: zip ...