React.js: Wrapping one component into another

by

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?

3 Answers
3

Leave a Comment