在使用该技巧时,建议先看一下相关的知识,点我查看

假如使用该属性时,想把父组件的所有属性及部分方法传递给子组件,该怎么办呢?看代码

const Child = ({ doSomething, value }) => (
<div onClick={() => doSomething(value)}>Click Me</div>
); class Parent extends React.PureComponent {
doSomething = (value) => {
console.log('doSomething called by child with value:', value);
} render() {
const { children } = this.props.children; const childrenWithProps = React.Children.map(children, child =>
React.cloneElement(child, { doSomething: this.doSomething })
);
return <div>{childrenWithProps}</div>
}
}; ReactDOM.render(
<Parent>
<Child value="1" />
<Child value="2" />
</Parent>,
document.getElementById('container')
);

react children技巧总结的更多相关文章

  1. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  2. 对React children 的深入理解

    React的核心为组件.你可以像嵌套HTML标签一样嵌套使用这些组件,这使得编写JSX更加容易因为它类似于标记语言. 当我刚开始学习React时,当时我认为“使用 props.children 就这么 ...

  3. React.Children详解

    React.Children提供了处理this.props.children的工具,this.props.children可以任何数据(组件.字符串.函数等等).React.children有5个方法 ...

  4. [React] Compound Component (React.Children.map & React.cloneElement)

    Imaging you are building a Tabs component. If looks like: <Tabs> <TabList> <Tab> o ...

  5. [React] Understand React.Children Utilities

    The data contained in this.props.children is not always what you might expect. React provides React. ...

  6. React源码 React.Children

    children是什么意思呢?就是我们拿到组件内部的props的时候,有props.children这么一个属性,大部分情况下,我们直接把 props.children 渲染到 JSX 里面就可以了. ...

  7. React: 通过React.Children访问特定子组件

    一.简介 React中提供了很多常用的API,其中有一个React.Children可以用来访问特定组件的子元素.它允许用来统计个数.map映射.循环遍历.转换数组以及显示指定子元素,如下所示: va ...

  8. React Children 使用

    React 有一个特殊的属性children, 主要用于组件需要渲染内容,但它并不知道具体要渲染什么内容,怎么会有这种使用场景?确实比较少,但并不是没有,比如弹出框.当你写一个弹出框组件的时候,你知道 ...

  9. React源码解析之React.Children.map()(五)

    一,React.Children是什么? 是为了处理this.props.children(this.props.children表示所有组件的子节点)这个属性提供的工具,是顶层的api之一 二,Re ...

随机推荐

  1. 多目标规划——fgoalattain

    多目标规划 多个目标函数,之间可以用他们的重要程度分析,来一次进行这个序贯算法,当然也可以无限逼近的方案——​ clc,clear; % 约束 a = [- - - - ]; b = [- - ]; ...

  2. ACM-ICPC (10/11)

    莫比乌斯 今年的多校比赛,莫比乌斯反演的题目经常出现,但是我们队对于这种题可以说是直接放掉,不是因为没学过,多少了解一些,但是也只是皮毛,导致根本就做不出来,其实想一想,其实次数多了,就可以看出原因了 ...

  3. HDU 1711 Number Sequence 【KMP应用 求成功匹配子串的最小下标】

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1711 Number Sequence Time Limit: 10000/5000 MS (Java/O ...

  4. Git使用02--branch分支, tag版本, 忽略文件 .gitingore

    一.分支 # 查看分支 git branch # 创建分支 git branch 分支名 # 切换分支 git checkout name # 创建并切换分支 git checkout -b name ...

  5. Linux下安装jdk步骤

    1.检查当前服务器中是否有安装jdkrpm -qa|grep java 2. 批量删除java rpm -qa | grep java | xargs rpm -e --nodeps 3. 安装jdk ...

  6. Linux 安装ngnix

    第一步:把nginx的源码包上传到linux系统/home 第二步:解压缩 [root@localhost ~]# tar zxf nginx-1.8.0.tar.gz 第三步:使用configure ...

  7. 【luogu P1455 搭配购买】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1455 一句话题目做法:并查集合并+01背包 启示:要每次再find一遍.路径压缩会快.因为合并的时候如果是1 ...

  8. http://blog.csdn.net/hhhccckkk/article/details/9313999

    http://blog.csdn.net/hhhccckkk/article/details/9313999

  9. Android学习笔记_28_手势识别

    一.准备手势库: 使用SDK自带例子GestureBuilder建立手势库(位置:android-sdk-windows\samples\android-10\GestureBuilder).使用Ge ...

  10. Android学习笔记_26_多媒体之拍照

    一.配置文件: 需要引入摄像头权限,sdcard读写权限. <?xml version="1.0" encoding="utf-8"?> <m ...