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. 29-中国剩余定理CRT

    https://blog.csdn.net/u010468553/article/details/38346195 中国剩余定理[数论] 2014年08月02日 12:55:59 阅读数:2351 中 ...

  2. Java 代理机制

    Table of Contents 1 引言 2 常见的代理 3 代理模式UML图 4 代理模式实例 5 java动态代理 5.1 java动态代理UML图 6 代理模式与装饰者模式的区别 6.1 装 ...

  3. LinuxSystemProgramming-vi

    Basic VI

  4. BS4爬虫实例应用-CISP

    爬取目前在官网可查询的CISP证书编号以及有效期并入库 也算是暴力破解,burp使用grep功能呢也可以实现. 下面是python的代码 #coding=utf-8 import requests i ...

  5. 无废话 Thrift 之 Hello World( PHP 版).

    Thrift 不再介绍.体验一把 PHP 的Server , PHP 的Client. 0.安装,装备环境,不表,运行 thrift -version 看到版本就行. 1.写 HelloThrift. ...

  6. React相关知识和经验的碎片化记录

    React相关知识和经验的碎片化记录 1.Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a chil ...

  7. 数据库工具链接阿里云MySQL数据库

    数据库工具:Toad for MySQL ssh工具:XShell 5 跳板机配置: 配置通道: 源主机:数据库工具链接的地址: 侦听接口:数据库工具侦听接口: 目标主机:数据库阿里云地址: 目标端口 ...

  8. Java虚拟机学习(1): 类加载机制

    转自:微信公共号ImportNew 来源:java2000_wl 链接:blog.csdn.net/java2000_wl/article/details/8040633 JVM把class文件加载的 ...

  9. kcp源码segment头文件各字段含义

    conv conv为一个表示会话编号的整数,和tcp的 conv一样,通信双// 方需保证 conv相同,相互的数据包才能够被认可 cmd             cmd用来区分分片的作用.IKCP_ ...

  10. javascript总结37:DOM:innerText 和 innerHTML

    innerText 和 innerHTML 作用: 给双标签的元素设置内容/获取双标签里面的内容 不同点: innerText 只是用于获取文本或设置文本 innerHTML 不仅可以用于设置/获取文 ...