ReactFundamentals:AccessingChildProperties

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

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

 
 
 
     
     React Lesson 6: Accessing Child Properties 
    
 


  
  
 
     /*  * @jsx React.DOM   */ 

     var  App =  React.createClass({
        render:   function  (){
              return   (
                     I   React  
            );
        }
    });

      var  BButton =  React.createClass({
       render:   function  () {
             return   (
              { this .props.children}
            );
       }
    });

      var  BHeart = 
            React.createClass({
                render:  function  (){
                      return    
                 }
            });


    React.render( , document.body);
 
 
  

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   (
              No passed  in !
            );
       }
    });  

We end up with this:

[Notice:] Just remeber when give class to the render elements, we need to use 'className' not 'class'.

查看更多关于ReactFundamentals:AccessingChildProperties的详细内容...