zoukankan      html  css  js  c++  java
  • [React] React Fundamentals: Accessing Child Properties

    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'.

  • 相关阅读:
    MySQL的事务用法:
    MySQL基本命令(增删改查,check约束)总结:
    (转)nodejs npm国内镜像
    NodeJS学习笔记(三)
    NodeJS学习笔记(二).js
    minimist的用法
    npm link没有效果的问题
    DOM Based XSS介绍
    NodeJS学习笔记(一)
    用Ruby写自动生成Sql语句脚本遇到的问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4363318.html
Copyright © 2011-2022 走看看