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. [topcoder]SmartWordToy

    广度搜索BFS,要用Queue.还不是很熟,这道题帮助理清一些思绪了.其实这道题是求最短路径,所以BFS遇到第一个就可以返回了,所以后面有些现有大小和历史大小的判断可以省却. 过程中拿数组存step还 ...

  2. Protel封装库

    一.目录下面的一些封装库中,根据元件的不同封装我们将其封装分为二大类:一类是分立元件的封装,一类是集成电路元件的封装 1.分立元件类: 电容:电容分普通电容和贴片电容: 普通电容在Miscellane ...

  3. 对QT的产品，以及QT的一些综合评论 good

    QT你不能说他不流行吧, WPS, Wirshark, KDE, dropbox, skype, virtualbox都和qt有关吧, 你想写个跨平台的C++程序, QT是个不错的选择, 普通PC应用 ...

  4. Android开发之AlertDialog

    http://www.cnblogs.com/Gaojiecai/archive/2011/12/10/2283156.html http://www.2cto.com/kf/201205/13187 ...

  5. PHP 'ext/gd/gd.c'信息泄漏漏洞

    漏洞版本: PHP 5.5.x 漏洞描述: CVE ID:CVE-2014-2020 PHP是一种HTML内嵌式的语言. PHP 'ext/gd/gd.c'没有检查数据类型,允许远程攻击者使用字符串或 ...

  6. Linux kernel ‘uio_mmap_physical’函数缓冲区溢出漏洞

    漏洞名称: Linux kernel ‘uio_mmap_physical’函数缓冲区溢出漏洞 CNNVD编号: CNNVD-201311-154 发布时间: 2013-11-13 更新时间: 201 ...

  7. [swustoj 585] 倒金字塔

    倒金字塔(0585) Time limit(ms): 3000 Memory limit(kb): 65535 Submission: 208 Accepted: 48   Description S ...

  8. 【转】VC中对文件的读写

    原文网址:http://www.cnblogs.com/LJWJL/archive/2012/10/06/2712466.html 注意: 1.由于C是缓冲写 所以要在关闭或刷新后才能看到文件内容 2 ...

  9. 万科北京区域V-learn发布 系V-LINK产品系中首批产品

    继今年4月发布了V-LINK万科社区服务商2.0升级版本后,万科北京区域再次迎来了品牌大动作.近日,北京万科正式发布“V-LINK”产品系中的首批产品“V-learn”相关战略. 全品类教育模式 据介 ...

  10. [CODEVS1116]四色问题

    题目描述 Description 给定N(小于等于8)个点的地图,以及地图上各点的相邻关系,请输出用4种颜色将地图涂色的所有方案数(要求相邻两点不能涂成相同的颜色) 数据中0代表不相邻,1代表相邻 输 ...