一、简介

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. Python下定义输出日志

    # 话不多说,直接看代码,,, # -*- coding:UTF-8 -*- # python version: 2.7.15 #脚本名, 日志名,日志路径 import os import sys ...

  2. 【Android - 问题解决】之Android Studio在Refreshing Gradle Project卡住的问题

    今天把Android Studio从2.2版本升级到了2.3版本,但是再打开以前项目的时候,就卡在 “Refreshing XXX Gradle Project” 这里不动了. 网上搜了一些解决方案, ...

  3. Java package 包的命名规范。

    Java的包名都有小写单词组成,类名首字母大写:包的路径符合所开发的 系统模块的 定义,比如生产对生产,物资对物资,基础类对基础类.以便看了包名就明白是哪个模块,从而直接到对应包里找相应的实现. 由于 ...

  4. c语言I博客专业04

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  5. 重写TabBar遇到的按钮不显示的问题

    这里的控件frame没有进行设置,无法显示 这里初始化的按钮 frame也为0, 因此 在 重写某个控件的时候 一定要调用layoutSubviews这个方法来对这个控件内部的子控件进行赋值

  6. Grok Debugger安装配置

    前言:由于使用ELK对日志进行集中管理,grok表达式无法验证是否正确,所以使用Grok Debugger进行调试,但是由于国外网站上不去(http://grokdebug.herokuapp.com ...

  7. 剑指offer-31：整数中1出现的次数（从1到n整数中1出现的次数）

    参考: https://troywu0.gitbooks.io/interview/整数中出现1的次数(从1到n整数中1出现的次数).html 题目描述 求出1~13的整数中1出现的次数,并算出100 ...

  8. kubernetes学习笔记（三）——利用kubeadm部署集群

    文章目录 (一)安装前准备 (二)master安装 1.安装组件 2.排错 (三)node安装 1.安装组件 2.加入master 3.排错 (四)网络安装 (五)dashboard安装 (一)安装前 ...

  9. 小程序使用wxs解决wxml保留2位小数问题

    1.出现溢出表现 从图中可以看到数字超出了很长长度.代码里面是如下这样的.为什么在0.35出现?或者一些相成的计算出现? 而 0.34却不会.(wap.0834jl.com) 0.41 也会出现,好像 ...

  10. 200G网盘资源分享

    今日偶得大量网盘资源,遂写一博文以分享! 来源:HACK学习呀,微信公众号:HACK学习呀 文件名 链接 提取密码 2015cracer入侵入门到精通视频教程 点我查看 trf3 一笔√带过入侵教程 ...