一、简介

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. vsftpd cmds_allowed 权限控制

    vsftpd cmds_allowed cmds_allowed=ABOR,CWD,LIST,MDTM,MKD,NLST, PASS,PASV,PORT,PWD,QUIT,RETR,RMD,RNFR, ...

  2. VMware中windows虚拟机的安装流程

    1.打开安装的VMware 15,点击新建虚拟机 2.选择典型即可,点击下一步          3.选择“稍后安装操作系统”,点击下一步        4.选择想安的版本,点击下一步         ...

  3. php实现微信拼手气红包

    $result = sendHB(3, 5); echo '<pre>'; var_export($result); echo array_sum($result); /** * 拼手气红 ...

  4. pod install/update速度慢或失败的解决方案实践

    本文基于 https://www.cnblogs.com/dabaomo/p/9634727.html 声明 坚决拥护党的领导,本文章所用技术乃出于工作需要,敬请谅解. 正文 可以先过去快速浏览一遍再 ...

  5. 漫谈边缘计算（三）：5G的好拍档

    边缘计算的热度迅速攀升,还有一个不得不提的因素,就是5G的发展. [5G推动云计算从集中化向分布式演进] 在第一篇文章(<漫谈边缘计算(一):边缘计算是大势所趋>)中我提到,传统的云计算技 ...

  6. 区块链学习笔记：DAY05 如何使用公有云区块链服务

    这是最后一节课了,主要讲华为云在云区块链提供的服务,如何基于华为云BCS来构建应用 先来个简单的比喻: 1.有关BaaS的范围定义 包含物理主机.虚拟主机.容器服务.区块链.智能合约和服务 2.华为云 ...

  7. Java-手动搭建SSH

    项目搭建工具:eclipse 项目开发环境:①Windows10-64位 ②Tomcat 8.5 ③jdk1.8.0_91 ④MySql 8.0.11 jar包准备:这里不详说,自己准备不不冲突能跑起 ...

  8. Python基础之第三方库gevent安装

    安装gevent库: 想要安装gevent库,我们需要确定pip版本: 使用 pip3 list: 我们可以发现pip版本为19.3.1,如果你们的pip版本不是最新版可以使用命令python -m ...

  9. java内存模型和内存结构

    java内存模型说的是多线程,网上可能会有写误导,并不是什么堆.栈.方法区,很多人都会搞混.说白了就是多线程中主线程和本地线程之间的一个数据可见性问题. jmm:java内存模型:jvm:java内存 ...

  10. 洛谷 题解 P5595 【【XR-4】歌唱比赛】

    本蒟蒻又双叒叕被爆踩了. 考试时一遍过 其实这题还是很简单的,难度不会大于普及组T1. CSP 2019 RP++ 看开始看到题目,觉得特别长,不想看... 我来和你们分析分析题目,你们就都可以秒了. ...