一、简介

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. day20190916notes

    记得学完知识,趁热打铁.认真看3遍,写抄写模仿3遍.记不得,就罚抄3遍.奖罚分明.自知之明.最重要的是看懂和理解代码.能自己看懂代码,多花时间和功夫. 只要功夫深,铁杵磨成针.确定一个努力的方向,坚持 ...

  2. 【Android - 控件】之MD - TextInputLayout的使用

    TextInputLayout是Android 5.0新特性——Material Design中的一个布局控件,主要用来嵌套EditText,实现数据输入时的一些效果,如: 当输入框获取焦点时,输入提 ...

  3. Ansible Playbooks 介绍 和 使用 一

    目录 Ansible Playbooks Playbooks 组成部分: YAML 介绍 YAML 语法 Ansible 基础元素 变量 facts registre 通过命令传递变量 通过roles ...

  4. 英语口语考试资料Food

    新东方推荐文章:Food and Health The food we eat seems to have profound effects on our health. Although scien ...

  5. git的用法 回到某个版本

    进入到项目文件夹 如果新建项目时没有勾选git 进入到项目中

  6. 转:spring4.0之二：@Configuration的使用

    从Spring3.0,@Configuration用于定义配置类,可替换xml配置文件,被注解的类内部包含有一个或多个被@Bean注解的方法,这些方法将会被AnnotationConfigApplic ...

  7. Spring Data-Spring整合Hibernate基于JPA规范

    JPA:由 Sun 公司提供了一对对于持久层操作的标准(接口+文档) Hibernate:是 Gavin King 开发的一套对于持久层操作的自动的 ORM 框架. Hibernate JPA:是在 ...

  8. 笔记||Python3之面向对象

    面向对象编程:简称OOP. 是一种程序设计思想.oop把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 在python中,所有数据类型都可以视为对象,也可以自定义对象.自定义的对象数据类 ...

  9. 【React】383- React Fiber：深入理解 React reconciliation 算法

    作者:Maxim Koretskyi 译文:Leiy https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliat ...

  10. 【Vuejs】301- Vue 3.0前的 TypeScript 最佳入门实践

    前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...-真香! 1. 使用官方脚手架构建 npm i ...