reactjs - How to reuse React component that has different markup? -

i have following component today, represents container box has heading , different rows. how looks:

var box = react.createclass({   render: function() {     return (       <boxheading title={this.props.headingtitle}/>       <boxbody rows={this.props.rows} />     )   } });  var boxbody = react.createclass({   render: function() {     return (       {this.rows()}     )   }    rows: function() {     return _.map(this.props.rows, function(row) {       return (         <houserow />       );     }, this);   } }); 

now question is: if want reuse box & boxbody instead of using want use kind of row, how it?

would pass kind of component want row box?

so, <box rowtype={<houserow} /> or similar?

the approach chose looks — you can combine box every type of row want, provided has correct interface. called object composition , legit , respected pattern in software engineering.

the thing is, in react should not passing rendered component, component class, this:

<box rowcomponent={ houserow } /> 

as see, don't need use parenthesis. , inside component, this:

var rowcomponent = this.props.rowcomponent; return (    <rowcomponent /> );