NVI NVI - 7 months ago 10
Javascript Question

React.js: Wrapping one component into another

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

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.

Comments