使用React.cloneElement()给子组件传值
2024-10-12 11:42:47
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
最新文章
- 【腾讯Bugly干货分享】基于RxJava的一种MVP实现
- [hadoop in Action] 第3章 Hadoop组件
- php 获取数组第一个元素 以及最后一个元素 && 最后一个元素的键名
- gulp教程之gulp-htmlmin
- Java——Swing事件处理
- xdg-open filename 以相应的程序 打开文件
- bug:无法给图片加边框
- ADB工具常用指令和使用情形分析
- R提高篇(二): 图形初阶
- 浅析Java反射机制
- .NET两种常见上传下载文件方法
- Android：布局单位换算
- dfs 生成排列和组合
- App Store不能下载一直等待中的两种解决办法
- VC++中字符串编码处理的一些相关问题
- Python--day08（文件操作）
- 【jpa】spring data jpa 配置使用
- Luminar 3 for Mac(照片编辑工具)v3.1.0中文特别版
- 交叉熵理解：softmax_cross_entropy,binary_cross_entropy,sigmoid_cross_entropy简介
- 苏宁基于Spark Streaming的实时日志分析系统实践 Spark Streaming 在数据平台日志解析功能的应用