React.Children提供了处理this.props.children的工具,this.props.children可以任何数据(组件、字符串、函数等等)。React.children有5个方法:React.Children.map(),React.Children.forEach()、React.Children.count()、React.Children.only()、React.Children.toArray(),通常与React.cloneElement()结合使用来操作this.props.children。

React.Children.map()

  React.Children.map()有些类似Array.prototype.map()。如果children是数组则此方法返回一个数组,如果是null或undefined则返回null或undefined。第一参数是children,即示例中的Father组件里的'hello world!'和() => <p>2333</p>函数。第二个参数是fucntion,function的参数第一个是遍历的每一项,第二个是对应的索引。
function Father({children}) {
return(
<div>
{React.Children.map(children, (child, index) => {
...
})}
</div>
)
} <Father>
hello world!
{() => <p>2333</p>}
</Father>
  
React.Children.forEach()
  跟React.Children.map()一样,区别在于无返回。 React.Children.count()
  React.Children.count()用来计数,返回child个数。不要用children.length来计数,如果Father组件里只有'hello world!'会返回12,显然是错误的结果。
function Father({children}) {
return(
<div>
{React.Children.count(children)}
</div>
)
} <Father>
hello world!
{() => <p>2333</p>}
</Father>

React.Children.only()
  验证children里只有唯一的孩子并返回他。否则这个方法抛出一个错误。
function Father({children}) {
return(
<div>
{React.Children.only(children)}
</div>
)
} <Father>
hello world!
</Father>

React.Children.toArray()
  将children转换成Array,对children排序时需要使用
function Father({children}) {
let children1 = React.Children.toArray(children);
return(
<div>
{children1.sort().join(' ')}
</div>
)
} <Father>
{'ccc'}
{'aaa'}
{'bbb'}
</Father> //渲染结果: aaa bbb ccc
  如果不用React.Children.toArray()方法,直接写children.sort()就会报错

Example:

例如有这样的需求,完成一个操作需要3个步骤,每完成一个步骤,对应的指示灯就会点亮。

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Steps, Step} from './Steps'; function App() {
return (
<div>
<Steps currentStep={1}> //完成相应的步骤,改变currentStep的值。如,完成第一步currentStep赋值为1,完成第二部赋值为2
<Step />
<Step />
<Step />
</Steps>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));

Steps.jsx

import * as React from 'react';
import './step.less'; function Steps({currentStep, children}) {
return (
<div>
{React.Children.map(children, (child, index) => {
return React.cloneElement(child, {
index: index,
currentStep: currentStep
});
})}
  </div>
);
} function Step({index, currentStep}: any) {
return <div className={`indicator${currentStep >= index + 1 ? ' active' : ''}`} />;
}
export {Steps, Step};

steps.less

.indicator {
display: inline-block;
width: 100px;
height: 20px;
margin-right: 10px;
margin-top: 200px;
background: #f3f3f3;
&.active {
background: orange;
}

React.Children详解的更多相关文章

  1. jQuery笔记-jQuery筛选器children()详解

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...

  2. React hooks详解

    此篇文章仅是对hooks入门的总结,老鸟略过吧~ React从16.8.X以后增加了一个新特性,react hooks 让我们看看这个新特性又带来了哪些惊喜呢~以下内容我们采取不同方式创建组件来进行对 ...

  3. vue和react全面对比(详解)

    vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...

  4. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  5. 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>

    Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...

  6. react基本demo详解

    一.react的优势 1.React速度很快:它并不直接对DOM进行操作,引入了一个叫做虚拟DOM的概念,安插在javascript逻辑和实际的DOM之间,性能好. 2.跨浏览器兼容:虚拟DOM帮助我 ...

  7. React 实践心得:react-redux 之 connect 方法详解

    Redux 是「React 全家桶」中极为重要的一员,它试图为 React 应用提供「可预测化的状态管理」机制. Redux 本身足够简单,除了 React,它还能够支持其他界面框架.所以如果要将 R ...

  8. React—组件生命周期详解

    React—组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...

  9. react目录结构、demo实例详解、属性数据绑定方式

    1.目录结构 2.demo实例详解 a)创建Home.js import React, { Component } from 'react'; //创建一个组件必须要集成Component组件,且组件 ...

随机推荐

  1. linux系统中的命令替换与整数运算$(),$(())

    一.$()与`` 在 bash shell 中,$( ) 与 ` ` (反引号) 都是用来做命令替换(command substitution)用的. 所谓的命令替换与我们第五章学过的变量替换差不多, ...

  2. 系统性能信息模块之psutil模块

    一.psutil模块介绍 官方网址:https://pypi.org/ psutil模块安装:https://github.com/giampaolo/psutil/blob/master/INSTA ...

  3. [SoapUI] SoapUI命令行方式运行

    https://www.soapui.org/test-automation/running-from-command-line/functional-tests.html TestRunner Co ...

  4. 巧用渐变色打造精致移动端APP

    渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色.在扁平化设计刚刚兴起时,渐变是设计师们避之不及的设计手法.然而自从Instagram ...

  5. mosquitto配置文件/etc/mosquitto/mosquitto.conf配置参数详细说明

    mosquitto配置文件/etc/mosquitto/mosquitto.conf配置参数详细说明 摘自:https://blog.csdn.net/weixin_43025071/article/ ...

  6. C#调用COM组件遇到的问题及解决办法

    1.无法嵌入互操作类型"xxx",请改用适用的接口. 解决办法: - 将所引用的程序集的[嵌入互操作类型]属性设置为[False]. 2.System.Runtime.Intero ...

  7. struts2标签使用详解

    Struts2常用标签总结一 介绍1.Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的代码 ...

  8. bbs3

    第三天 昨日回顾: 1 验证码刷新 -$("#img_code")[0].src+="?" -本质就是向这个地址又发了一次请求 2 js中字符串拼接 -es5之 ...

  9. mybatis 传参是 list<string> 的注意事项

    <!--付款 批量 修改账单状态--><update id="editbillpayALL" parameterType="java.util.List ...

  10. org.eclipse.wst.common.project.facet.core.xml

    Ctrl+Shift+R    *core.xml 修改Dynamic Web module 由3.1 切至2.几