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

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

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. Python Day 15 递归、匿名函数、内置函数

    阅读目录 内容回顾 生成器的send方法 递归 匿名函数 内置函数 ##内容回顾 #1.带参装饰器 - 自定义 | wraps def wrap(info) def outer1(func): fro ...

  2. python常见异常及解决方法

    异常1: ValueError: unsupported hash type sha224 ERROR:root:code for hash sha256 was not found. Traceba ...

  3. emmet工具使用和技巧

    介绍 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等.于是,就有了 Emme ...

  4. struts2 实现文件下载方法汇总

    http://pengranxiang.iteye.com/blog/259401 一.通过struts2提供的下载机制下载文件: 项目名为 struts2hello ,所使用的开发环境是MyEcli ...

  5. sql得到表中的列信息

    取列全部用的 sys. 中的表 CTE:WITH name AS() 用法:   sql树形查询 ①主键信息 SELECT ic.column_id, ic.index_column_id, ic.o ...

  6. MVC5 Attribute(特性)

    AuthorizeAttribute:一般用来判断权限 ActionFilterAttribute:方法执行前后动作 OutputCacheAttribute:输出缓存设置 注:我们创建名称的时候请带 ...

  7. MySQL存储引擎与索引

    引言: MySQL存储引擎主要分为 InnoDB 存储引擎与 MyISAM 存储引擎.都采用B+数的存储结构. 应用场景: InnoDB适合:(1)可靠性要求比较高,要求事务:(2)大量 insert ...

  8. 涉及自制系统AS的几个协议总结

    IGP(Interior Gateway Protocol): 内部网关协议的总称:其下有RIP和OSPF EGP(External Gateway Protocol): 外部网关协议的总称:目前使用 ...

  9. Redux学习笔记-----基础部分

    Redux的基本原则 唯一数据源(应用的状态数据应该只存储在唯一的一个store上): 保持状态只读(不能直接修改Store的状态,而是应该通过派发一个action对象来完成) 数据改变只能通过纯函数 ...

  10. mysql数据库关于事务的问题?求解答

    表格代码: CREATE TABLE `t_teacher` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) NOT NULL, `deposit` ) DEFA ...