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. C内存管理

    一般而言,分配给进程的内存有四个概念上不同的区域,分别为:代码段.数据段.堆和栈,其中数据段又可以细分为初始化为非零的数据和初始化为零的数据.如下图所示: 1.栈区(stack)— 由编译器自动分配释 ...

  2. 用Unity3.0+MVC4搭建项目

    新年快乐!又是新的一年到来了,我好久没有在园子里面做笔记啦,由于工作上的事,还好年前把该做的都完善了,于是就写了辞职信.由于家庭原因,不得不离职,在春节期间呢,我放松了几天,去这里去那里的,朋友们喜欢 ...

  3. Rails 撤销操作

    即使再小心,在开发 Rails 应用程序过程中仍然可能犯错.幸运的是,Rails 提供了一些工具能够帮助你进行复原. 举例来说,一个常见的情况是,你想更改控制器的名字,这时你就要撤销生成的代码.生成控 ...

  4. scaleform 注意事项

    在使用 自带的UI .fla 里面的组建时 需要把自己建立的fla进行如下设置.  文件-发布设置-flash-脚本actionscript3.0设置——舞台:自动声明舞台实例    

  5. c#中Lock（锁）的研究以及跨线程UI的操作

    本文只针对C#中,多线程同步所用到的锁(lock)作为研究对象.由于想更直观的显示结果,所以,在做demo的时候,就把多线程通过事件操作UI的代码也写了出来,留作备忘和分享吧.       其实多线程 ...

  6. BZOJ_2194_快速傅立叶之二_(FFT+卷积)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=2194 给出序列\(a[0],a[1],...,a[n-1]\)和\(b[0],b[1],... ...

  7. 获得设备型号(含iPhone6 , iPhone 6+)

    //获得设备型号 + (NSString *)getCurrentDeviceModel:(UIViewController *)controller { int mib[2]; size_t len ...

  8. grb文件的读取

    grb文件的读取(转自:http://blog.sciencenet.cn/blog-922140-713837.html) read_grib.r4.rar 今天来斟酌了下grb文件格式的读取,现在 ...

  9. HTTP2.0那些事

    1. HTTP2.0的前世 http2.0的前世是http1.0和http1.1这两兄弟.虽然之前仅仅只有两个版本,但这两个版本所包含的协议规范之庞大,足以让任何一个有经验的工程师为之头疼.http1 ...

  10. BrnShop开源网上商城第六讲：扩展视图功能

    在正式讲解扩展视图功能以前,我们有必要把视图的工作原理简单说明下.任何一个视图都会被翻译成一个c#类,并保存到指定的位置,然后被编译.这也就是为什么能在视图中包含c#代码片段的原因.下面我们通过一个项 ...