javascript - React.js: Difference between passing in the subcomponents with React.render() and with React.createClass()'s render? -

i'm working on project using react.js, , confused composition of react.

http://facebook.github.io/react/docs/multiple-components.html

the link above gives example. uses react.creatclass() create 3 components. parent component , 2 child components. parent component includes others within it's jsx in render method.

this example's clear, not 'reusable'. if wanna pass in child in situation? react.js seems lacking 'extend' method backbone's view.

later, found can pass children components in react.render(), , use this.props.children composite.

  var tom = react.createclass({   render: function(){       return(           <a>this tom.</a>       )   }   });  var john = react.createclass({   render: function(){       return(           <a>this john.</a>       )   } });  var outter = react.createclass({ componentdidmount:function(){   console.log(this.props.children); },  render: function(){   return(       <div classname="test">         {this.props.children}       </div>   ) } });  react.render(<outter><tom /><john /></outter>, document.getelementbyid('main')); 

i think that's great what's difference between method , example above? method right way composite components in react.js?

thanks

the difference said, can pass components you'd children of component. components use this.props.children components acts wrappers style , behaviour, contents of component changes different use cases. popup, want same , behaviour (like close button) every popup, contents of popup different every popup.

components don't use this.props.children more black boxes, know how should rendered , child components need. can still make them dynamic passing other props them.

components can passed props. components js objects, , js object can passed prop. don't think i've ever seen use case doing it. might make sense if have wrapper component 2 or more specific "slots" should rendered to. like:

var wrapper = require('./wrapper'); var header = require('./title'); var content = require('./content'); var footer = require('./footer');  var mycomponent = react.createclass({   render() {     return <wrapper footer={footer} header={header} content={content} />;   } });