patternjavascriptreactCritical

React.js: Wrapping one component into another

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

oneanotherreactwrappingintocomponent

Problem

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.

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

var Wrapper = React.createClass({
  render: function() {
    return (
      
        before
          
        after
      
    );
  }
});

var Main = React.createClass({
  render: function() {
    return (
      content
    );
  }
});

Desired output:


  before
    content
  after

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

Solution

Try:

var Wrapper = React.createClass({
  render: function() {
    return (
      
        before
          {this.props.children}
        after
      
    );
  }
});

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

Code Snippets

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

Context

Stack Overflow Q#20851533, score: 272

Revisions (0)

No revisions yet.