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. CDQ分治题目小结

    CDQ分治属于比较特殊的一类分治,许多问题转化为这类分治的时候,时空方面都会有很大节省,而且写起来没有这么麻烦. 这类分治的特殊性在于分治的左右两部分的合并,作用两部分在合并的时候作用是不同的,比如, ...

  2. ANDROID_MARS学习笔记_S01原始版_011_XML

    一.代码 1.xml(1)main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLay ...

  3. matlab 画图

    先前讲解了简单绘图方法: http://www.cnblogs.com/youxin/p/3859923.html x = 0:pi/100:2*pi; y = sin(x); plot(x,y)下面 ...

  4. 微小说《tree》

    自己一直是一个矛盾纠结的人,计算机专业,却喜欢画画,偶尔会写些短文,寓言,或者酸酸的情诗.. 废话不多说,各位看官有兴趣便随意看看,若有些于共鸣,便共勉之. 正文 两株幼苗从土壤中破土而出,一颗天生强 ...

  5. 安装gem invalid date format in specification错误的解决方法

    别的不说,报错信息直接贴图: 解决方法: 1.找到你环境目录下的spec,例如:D:\Ruby187\lib\ruby\gems\1.8\specifications. 2.找到引起错误文件的gems ...

  6. hdu2852KiKi's K-Number（区间K值）

    http://acm.hdu.edu.cn/showproblem.php?pid=2852 区间K值写错了... #include <iostream> #include<cstd ...

  7. 下拉列表联动显示（Car表） 三级联动

    .Models namespace 下拉列表联动显示_Car表_.Models { public class ProductorBF { private MyDBDataContext _contex ...

  8. apache开源项目--ibatis

    iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目.最初侧重于密码软件的开发,现在是一个基于Java的持久层框架.i ...

  9. Eclipse 中使用Genymotion 作为模拟器的步骤

    我这里是先安装的genymotion, 后安装的eclipse. 1:安装genymotion 无难度, 直接安装就行了. 2:安装eclipse 下载adt即可, 解压运行. 3:运行eclipse ...

  10. HDOJ 1879

    思路:求最小生成树(最小生成树就是权值之和最小的极小连通子图) ,注意将已修过的边的权值置为0: 数据结构:由于数据量小,可以用临接矩阵直接存储图 #include<stdio.h> #i ...