When you're building your React components, you'll probably want to access child properties of the markup.

Parent can read its children by accessing the special this.props.children prop.this.props.children is an opaque data structure: use the React.Children utilities to manipulate them.

https://facebook.github.io/react/docs/multiple-components.html

this.props.children undefined

You can't access the children of your component through this.props.children.this.props.children designates the children being passed onto you by the owner.

https://facebook.github.io/react/tips/children-undefined.html

Type of the Children props

Usually, a component's children (this.props.children) is an array of components. However, when there is only a single child, this.props.children will be the single child component itself without the array wrapper. This saves an array allocation.

https://facebook.github.io/react/tips/children-props-type.html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>React Lesson 6: Accessing Child Properties</title>

    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>

</head>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>

<script type="text/jsx">

    /** @jsx React.DOM */

    var App = React.createClass({

        render: function(){

            return (

                    <BButton>I <BHeart></BHeart> React</BButton>

            );

        }

    });

    var BButton = React.createClass({

       render: function() {

           return (

             <a className="btn btn-primary">{this.props.children}</a>

           );

       }

    });

    var BHeart =

            React.createClass({

                render:function(){

                    return <span className="glyphicon glyphicon-heart"></span>

                }

            });

    React.render(<App />, document.body);

</script>

</body>

</html>

App has two children BButton and BHeart, all thoes chilren come thought from {this.props.children}.

If you don't have {this.props.children}:

    var BButton = React.createClass({

       render: function() {

           return (

             <a className="btn btn-primary">No passed in!</a>

           );

       }

    });

We end up with this: 

[Notice:] Just remeber when give class to the render elements, we need to use 'className' not 'class'.

[React] React Fundamentals: Accessing Child Properties的更多相关文章

  1. [React Fundamentals] Accessing Child Properties

    When you're building your React components, you'll probably want to access child properties of the m ...

  2. [React] React Fundamentals: transferPropsTo

    the transferPropsTo method lets you easily push properties into your components to easily customize ...

  3. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  4. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  5. React/React Native 的ES5 ES6写法对照表－b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  6. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  7. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  8. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

  9. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

随机推荐

  1. MMU、Icache、Dcache

    http://blog.csdn.net/iodoo/article/details/8954014 i-cache(instruction cache)是指令高速缓冲存储器. Cache存储体:存放 ...

  2. Tomcat部署(转)

    首先说说tomcat的几种部署方法: 1.将应用文件夹或war文件塞到tomcat安装目录下的webapps子目录下,这样tomcat启动的时候会将webapps目录下的文件夹或war内容当成应用部署 ...

  3. 虚函数表以及RTTI阅读（阅后焚）

    http://blog.csdn.net/haoel/article/details/1948051/ http://www.cnblogs.com/ustc11wj/archive/2012/08/ ...

  4. OpenCV学习笔记：如何扫描图像、利用查找表和计时

    目的 我们将探索以下问题的答案: 如何遍历图像中的每一个像素? OpenCV的矩阵值是如何存储的? 如何测试我们所实现算法的性能? 查找表是什么?为什么要用它? 测试用例 这里我们测试的,是一种简单的 ...

  5. java的异常处理机制(try…catch…finally)

    1 引子try…catch…finally恐怕是大家再熟悉不过的语句了,而且感觉用起来也是很简单,逻辑上似乎也是很容易理解.不过,我亲自体验的“教训”告诉我,这个东西可不是想象中的那么简单.听话.不信 ...

  6. 应付发票审批 Hold and Release Names

    (N) AP > Setup > Invoice > Hold and Release Names 这里一般默认就可以了.Use the Invoice Hold and Relea ...

  7. ArrayList Iterator remove java.lang.UnsupportedOperationException

    在使用Arrays.asList()后调用add,remove这些method时出现 java.lang.UnsupportedOperationException异常.这是由于Arrays.asLi ...

  8. WIKIOI 3243 区间翻转

    3243 区间翻转 题目描述 Description 给出N个数,要求做M次区间翻转(如1 2 3 4变成4 3 2 1),求出最后的序列 输入描述 Input Description 第一行一个数N ...

  9. 定制属于自己的自动化安装的linux系统镜像

    使用软件和平台 1.基于平台:                  Vmware workstation 8.0 2.基于系统镜像:               rhel-server-5.8-i386 ...

  10. 基于.NET平台的分布式应用程序的研究

    摘 要:.NET框架是Microsoft用于生成分布式Web应用程序和Web服务的下一代平台.概述了用于生成分布式应用程序的.NET框架的基本原理.重点讲述了.NET框架的基础:公共语言运行时(CLR ...