一、简介

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. 3、Docker 基础安装和基础使用 二

    Docker 网络 启动了nginx容器,但却不知道从哪里进行访问nginx. 启动nginx容器,并附加网络映射 在启动nginx容器的时候,增加一个-P大写的P的参数 表示随机映射一个端口 [ro ...

  2. python calendar 时间处理类库

    #python中的calendar import calendar #返回指定年的某月 def get_month(year, month): return calendar.month(year, ...

  3. 英语口语考试资料Friendships

    Friendships Remember Friendships can be complicated. When you want to get to know someone, it helps ...

  4. k 近邻算法解决字体反爬手段｜效果非常好

    字体反爬,是一种利用 CSS 特性和浏览器渲染规则实现的反爬虫手段.其高明之处在于,就算借助(Selenium 套件.Puppeteer 和 Splash)等渲染工具也无法拿到真实的文字内容. 这种反 ...

  5. Python中的UDP协议应用之飞秋应用-单IP版本

    UDP协议是无连接的.不稳定的网络通信协议. 通过使用飞秋端口(2425),以及模拟飞秋消息格式实现使用UDP协议对飞秋进行通信. 飞秋通信格式: '1:1000:66:%s:32:%s' 以冒号分割 ...

  6. Docker系列之MySQL安装教程

    Docker系列之MySQL安装教程 有了前面的基础教程Docker系列之常用命令操作手册之后,本博客记录一篇mysql的安装教程 mysql镜像查询命令 docker search mysql 几个 ...

  7. Swift语法注意

    一直没有太弄明白可选值以及解包.下面说一下几点理解: OC中与Swift的nil 的区别: OC中nil表示指向不存在对象的指针 swift中表示值不存在,任何类型的可选值都可以为nil,包含基本数据 ...

  8. java概述和java环境按照，java开发体验

    java概述: Java的发展可以归纳如下的几个阶段. (1)第一阶段(完善期):JDK 1.0 ( 1995年推出)一JDK 1.2 (1998年推出,Java更名为Java 2): (2)第二阶段 ...

  9. 【CSS】305- [译] Web 使用 CSS Shapes 的艺术设计

    %; %; %; %; 0, 0 100%, 100% 100%); %; %; % 0, 0 100%, 100% 100%); %; %; ) p:nth-of-type(1)::before { ...

  10. CSS中的变量使用，var()语法

    参考博客:https://blog.csdn.net/qq_34206361/article/details/53690414