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. ipconfig命令

    C:\Windows\System32>ipconfig -all Windows IP 配置 主机名 . . . . . . . . . . . . . : LuJunTao 主 DNS 后缀 ...

  2. 阿里巴巴SUI Mobile的使用

    1.引入文件 <link rel="stylesheet" href="./css/sm.min.css"> <link rel=" ...

  3. PHP 'ext/gd/gd.c' gdImageCrop整数符号错误漏洞

    漏洞版本: PHP 5.5.x 漏洞描述: CVE ID:CVE-2013-7328 PHP是一种HTML内嵌式的语言. PHP 'ext/gd/gd.c' gdImageCrop函数存在多个整数符号 ...

  4. Ubuntu Builder —— 一个制作自己的发行版的工具

    Ubuntu Builder 是一个使用起来很简单的用来构建基于 Ubunut 的自己的发行版的工具. 你可以下载最新的 Ubuntu Builder 的 DEB 安装包.下载和安装请前往:http: ...

  5. [转] HDU 题目分类

    转载来自:http://www.cppblog.com/acronix/archive/2010/09/24/127536.aspx 分类一: 基础题:1000.1001.1004.1005.1008 ...

  6. ASP.NET MVC3学习心得-----表单和HTML辅助方法

    5.1表单的使用 5.1.1  action和method的特性 表单是包含输入元素的容器,包含按钮.复选框.文本框等元素,表单的这些输入元素使得用户能够向页面中输入信息,并把输入信息提交给服务器.A ...

  7. 嵌入式开发软件环境：uboot、kernel、rootfs、data布局分析

    uboot+linux的整体方案 开发板的datasheet中都有详细的地址空间的划分,其中比较重要的两块是:DDR地址空间和Flash地址空间.DDR空间是系统和应用的运行空间,一般由linux系统 ...

  8. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 总体介绍

    一.系统总体介绍 企业业务管理系统是针对经营企业管理而开发的专业管理软件, 是以“精细管理.过程监控”为设计理念,全面满足企业的信息化管理需求,充分发挥专业.平台.灵活等优点. 集进销存.财务.CRM ...

  9. （转载）file_get_contents("php://input")

    (转载)http://taoshi.blog.51cto.com/1724747/1165499 $data = file_get_contents("php://input"); ...

  10. 数据结构：二级指针与Stack的数组实现

    [简介] Stack,栈结构,即传统的LIFO,后进先出,常用的实现方法有数组法和链表法两种.如果看过我上一篇文章<数据结构:二级指针与不含表头的单链表>,一定会看到其中的关键在于,利用v ...