CODEWITHSUNDEEP
javascriptreactjs
boom
boom

Reputation: 11656

Nesting React.js Components

I'd like to call the render of a nested component within the render of a parent. This is what I've tried so far. Is there a pattern for this? Thanks.

var nest = React.createClass({
  render: function() {
    return React.DOM.div({
      className: 'boop' 
    }, 'hello')
  }
})

var comp = React.createClass({
  render: function() {
    return React.DOM.div({
      className: 'beep', 
      children: React.renderComponent(nest(this.props))
    })
  }
})

React.renderComponent(comp(props), document.body)

Expected: 

  <body>
    <div class='beep'>
      <div class='boop'>
        hello
      </div>
    </div>
  </body>

Upvotes: 0

Views: 2949

Answers (1)

Brigand
Brigand

Reputation: 86220

You just pass it as a child:

var comp = React.createClass({
  render: function() {
    return React.DOM.div({
      className: 'beep'
    }, nest(this.props))
  }
});

React.renderComponent is for declaring the root component and its mount point (sometimes multiple). It isn't used within components.

Upvotes: 6

Related Questions