1、组件

React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 的方法就是用于生成一个组件类。

2、this.props对象

即是对组件标签中的标签属性和子节点构成的集合。

控制台显示为

注：this.props.children 的值有3种可能：即当前组件没有字节点时，它就是undefined；如果有一个子节点，数据类型是object；如果有多个子节点时，数据类型就是array。所以处理this.props.children时需要特别注意。

React对此提出了解决方法，即可以用React.Children.map来便历此节点。

页面显示为

控制台显示为

React 的组件与 this.props对象的更多相关文章

  1. 为什么react的组件要super(props)

    https://segmentfault.com/q/1010000008340434

  2. 从 0 到 1 实现 React 系列 —— 2.组件和 state|props

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  3. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

  4. React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题

    React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...

  5. React创建组件的三种方式及其区别

    内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...

  6. React 父子组件和非父子组件传值

      零.this.props     可以接收到 外界的传值 和 此组件标签内部自定义的方法       例:         <one vals={message} sendVal={this ...

  7. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  8. React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  9. React.js 小书 Lesson22 - props.children 和容器类组件

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...

随机推荐

  1. python中sorted()和set()去重，排序

    前言 在看一个聊天机器人的神经网络模型训练前准备训练数据,需要对训练材料做处理(转化成张量)需要先提炼词干,然后对词干做去重和排序 words = sorted(list(set(words))) 对 ...

  2. MB SD Connect 5 vs 2017 FVDI2 Commander

    Both MB SD C5 and FVDI II are diagnostic and Programmer tools for Mercedes Benz Cars & Trucks.Th ...

  3. Python数据分析Pandas库之熊猫(10分钟二)

    pandas 10分钟教程(二) 重点发法 分组 groupby('列名') groupby(['列名1','列名2',.........]) 分组的步骤 (Splitting) 按照一些规则将数据分 ...

  4. react中对于context的理解

    一.context旧版的基本使用 1.context的理解 当不想在组件树中通过逐层传递props或state的方式来传递数据时,可使用context来实现跨层级的组件数据传递. 2.context的 ...

  5. Pytrhon结束死循环的子线程

    Python在子线程无线循环的过程中,如果直接ctrl+c结束程序的话,虽然程序可以结束,但是会导致子线程资源无法回收,一般情况不会有太大影响,但是使用TCP通信的时候,子线程是占用特定的端口的,在资 ...

  6. Java8过滤器(Filter)

    1.在Java之前对List进行过滤的方式 public class BeforeJava8 { public static void main(String[] args) { List<Pe ...

  7. 给COCO数据集的json标签换行

    #include <iostream> #include <fstream> #include <string> #include <vector> u ...

  8. Bigger-Mai 养成计划，Python基础巩固一

    本日复习内容 Py2与Py3的区别:Py2:print()直接写字符串,不用加括号Py3:print()必须加括号,某些库改名了.还有谁不支持Py3:Twisted:具体能感知的大改动并不多 老生常谈 ...

  9. 牛客练习赛43F Tachibana Kanade Loves Game

    题目地址 Link 题解 这题其实就是求1~n中有多少与2~20互质的数,然后其实只跟1~20里面的质数有关. 那么考虑容斥一下求出来一共有多少个不互质的,用n减一下就是互质的数的个数了.然后判一下a ...

  10. python程序—封装案例

    需求: 1.房子有户型.总面积.家具名称列表 房子没有任何家具 2.家具有名字和占地面积,其中 席梦思(bed):4平米 衣柜(chest): 2平米 餐桌(table): 1.5平米 3.将以上3个 ...