React.js: Wrapping one component into another

Question

Many template languages have "slots" or "yield" statements, that allow to do some sort of inversion of control to wrap one template inside of another.

Angular has "transclude" option.

Rails has yield statement. If React.js had yield statement, it would look like this:

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          <yield/>
        after
      </div>
    );
  }
});

var Main = React.createClass({
  render: function() {
    return (
      <Wrapper><h1>content</h1></Wrapper>
    );
  }
});

Desired output:

<div class="wrapper">
  before
    <h1>content</h1>
  after
</div>

Alas, React.js doesn’t have a <yield/>. How do I define Wrapper component to achieve the same output?

Answer 1

Try:

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          {this.props.children}
        after
      </div>
    );
  }
});

See Multiple Components: Children and Type of the Children props in the docs for more info.