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. flash中函数的理解

    flash 中的函数, 只有在调用时,会分配 数据地址(参数数据,返回数据等)和代码地址. 并运行语句,得到结果(返回数据). 结果(返回数据)赋值后 函数调用结束,释放所有建立的所有空间. ---- ...

  2. UAC新解（有非正常手段可以绕过）

    360第一次注册是需要弹,可是以后就不弹了开机自启动不弹框,开机自启动不弹框 服务是system权限再说一句,一般程序也不需要过UAC系统启动项白名单.UAC有一个白名单机制.还有UAC也可以通过wu ...

  3. x+2y+3z=n的非负整数解数

    题目:给一个正整数n,范围是[1,10^6],对于方程:x+2y+3z = n,其中x,y,z为非负整数,求有多少个这样的三元组 (x,y,z)满足此等式. 分析:先看x+2y=m,很明显这个等式的非 ...

  4. 开源的文件比较工具：WinMerge,KDiff3,diffuse

    为了寻找免费的BeyondCompare的替代品,最后经过实用,找到如下一些: 1.diffuse 感受:如果仅仅是比较两个文本类的文件,这个软件也就够用了. 安装好后,对着文件点击右键,会出现&qu ...

  5. hduAnother Graph Game

    http://acm.hdu.edu.cn/showproblem.php?pid=4647 很扯的一题 将每条边的一半权值分给它所连的两个结点 #include <iostream> # ...

  6. [转] 弱校ACM奋斗史

    转载来自:http://blog.163.com/lx_zz0o0/blog/static/236205116201442604234538/ 弱校ACM奋斗史  2014-05-26 00:42:3 ...

  7. FZU2232 炉石传说 最大匹配

    思路:正好是二分图,自己敌人,符合条件的随从二人组建边,最大匹配为n是符合要求 #include <cstdio> #include <cstring> #include &l ...

  8. FZU2090 旅行社的烦恼 巧妙floyd 最短路

    分析:floyd看似很好理解,实际上是状态转移,具体的解释参照这里 http://www.cnblogs.com/chenying99/p/3932877.html 深入理解了floyd后,这个题就可 ...

  9. [liu yanling]常用的测试工具

    常用的测试工具 1. 功能测试工具——QTP 2. 性能测试工具——LoadRunner 3. 测试管理工具——TestDirector 4. 白盒测试工具——Nunit,Junit,C++Test, ...

  10. [Jacky] Stoe load reload 区别

    load( Object options ) : Boolean 采用配置好的Reader格式去加载Record缓存,具体请求的任务由配置好的Proxy对象完成. reload( Object opt ...