一、简介

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

var React = {

  // Modern

  Children: {

    map: ReactChildren.map, //映射

    forEach: ReactChildren.forEach,//遍历

    count: ReactChildren.count,    //个数

    toArray: ReactChildren.toArray,//转换数组

    only: onlyChild //显示子组件

  },

  Component: ReactComponent,  //组件

  createElement: createElement, //创建节点

  cloneElement: cloneElement,   //克隆节点

  isValidElement: ReactElement.isValidElement, //验证节点

  // Classic

  PropTypes: ReactPropTypes, //类型验证

  createClass: ReactClass.createClass, //创建组件类

  createFactory: createFactory, //创建工厂类

  createMixin: function (mixin) {  //创建视图扩展类

    // Currently a noop. Will be used to validate and trace mixins.

    return mixin;

  },

  // This looks DOM specific but these are actually isomorphic helpers

  // since they are just generating DOM strings.

  DOM: ReactDOMFactories, //节点文档

  version: ReactVersion, //版本号

  // Hook for JSX spread, don't use this for anything else.

  __spread: assign

};

二、使用

需求：根据条件，根组件会选择需要显示的子组件进行展示。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react/react.js"></script>

    <script src="react/react-dom.js"></script>

    <script src="react/browser.min.js"></script>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        const targetNode = document.getElementById("container");

        //结构赋值，作用域本地化

        const {Children, propTypes} = React;

        const {render} = ReactDOM;

        //过滤函数，通过过滤将不符合条件的子组件去除，只会返回特定的子组件进行显示

        const showChild = (children, child) => Children.toArray(children).filter(c => c.type === child)[];

        //下面是无状态函数式组件，children为根组件的孩子组件数组

        //差劲：子组件

        const PoorChild = ({children}) => Children.only(children);

        //中等：子组件

        const MediumChild = ({children}) => Children.only(children);

        //优秀：子组件

        const GoodChild = ({children}) => Children.only(children);

        //展示：根组件，会根据分数显示对应的孩子组件

        const Display = ({score, children}) => {

            console.log(children);

            if (score>= && score < )  return showChild(children, PoorChild);

            if (score >= && score < ) return showChild(children, MediumChild);

            if (score >= && score <= ) return showChild(children, GoodChild);

        };

        //【0 , 60)：差劲  [60 , 85)：中等 [85 , 100]：优秀

        const score = ;

        render(

                <div>

                    <Display score={score}>

                        <PoorChild>

                            <h1>my score is poor!</h1>

                        </PoorChild>

                        <MediumChild>

                            <h1>my score is medium!</h1>

                        </MediumChild>

                        <GoodChild>

                            <h1>my score is good!</h1>

                        </GoodChild>

                    </Display>

                </div>,

            targetNode

        )

    </script>

</body>

</html>

可以看到三个子组件，只有优秀组件显示出来 :

可以看到子元素数组children的结构如下所示：

React: 通过React.Children访问特定子组件的更多相关文章

  1. react中的children使用方法

    使用过vue的小伙伴都知道vue中有个slot,也就是插槽,作用就是占位,那么再react中可以使用children来替代 父组件 render(){ return( <div> < ...

  2. react初探（二）之父子组件通信、封装公共组件

    一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...

  3. React躬行记（3）——组件

    组件(Component)由若干个React元素组成,包含属性.状态和生命周期等部分,满足独立.可复用.高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用 ...

  4. react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

    第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...

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

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

  6. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

  7. react 使用antd的TreeSelect树选择组件实现多个树选择循环

    需求说明,一个帐号角色可以设置管理多个项目的菜单权限 且菜单接口每次只能查询特定项目的菜单数据[无法查全部] 开发思路: 1,获取项目接口数组,得到项目数据 2,循环项目数据,以此为参数递归查询菜单数 ...

  8. React: 研究React的组件化

    一.简介大概 在以往的Web开发中,会把web页面所有的复杂控件作为一个单一的整体进行开发,由于控件之间需要进行通信,因此不同的组件之间的耦合度会很多,由于开发一个控件的时候要考虑到控件与控件之间的联 ...

  9. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

随机推荐

  1. 华为云EI人脸识别接口初探

    0. 准备工作 开户及申请开通人脸识别服务,可以参考https://education.huaweicloud.com:8443/courses/course-v1:HuaweiX+CBUCNXE01 ...

  2. HotStuff共识协议详解

    1. 前言 HotStuff提出了一个三阶段投票的BFT类共识协议,该协议实现了safety.liveness.responsiveness特性.通过在投票过程中引入门限签名实现了O(n)的消息验证复 ...

  3. E - Unimodal Array CodeForces - 831A

    Array of integers is unimodal, if: it is strictly increasing in the beginning; after that it is cons ...

  4. Selenium自动化面试题

    (1)selenium的工作原理?        ① 脚本启动driver ② driver去驱动浏览器作为远程服务器 ③ 执行脚本发送请求 ④ 服务器解析请求作出相应操作,并返回给客户端(脚本) ( ...

  5. 使用FileReader在浏览器读取预览文件(image和txt)

    如标题,之前在某个地方看到因为有Blob的存在,理论上可以在浏览器上查看所有格式的文件.自己想着试试现在暂时只能够查看图片和预览txt文件.其他的比如doc,docx格式的文件查看的时候是乱码 如图: ...

  6. JVM系列三（垃圾收集器）.

    一.概述 1. 哪些内存需要回收 上篇文章 我们介绍了 Java 内存运行时区域的各个部分,其中程序计数器.虚拟机栈.本地方法栈三个区域随线程而生,随线程而灭,在这几个区域内就不需要过多考虑回收的问题 ...

  7. 搞清楚Spring Cloud架构原理的这4个点，轻松应对面试

    前言 现在分布式系统基本上都是标配了,如果你现在还在玩儿单机,没有接触过这些东西的话,权当是为你打开一扇新的大门吧. 大的单体项目 以前我们做单机系统的时候,所有的代码都在一个项目里面,只是不同的模块 ...

  8. apache与tomcat的区别

    1. Apache是web服务器,Tomcat是应用(java)服务器,它只是一个servlet容器,是Apache的扩展. 2. Apache和Tomcat都可以做为独立的web服务器来运行,但是A ...

  9. 【Java必修课】图说Stream中的skip()和limit()方法及组合使用

    1 简介 本文将讲解Java 8 Stream中的两个方法:skip()和limit().这两个方法是Stream很常用的,不仅各自会被高频使用,还可以组合出现,并能实现一些小功能,如subList和 ...

  10. OpenSSL 自述

    1995 年, Eric A. Young 和 Tim J. Hudson 发明了 SSLeay,它是 SSL(Open-source Secure Sockets) 协议的实现.1998 年,You ...