title: React.js: Wrapping one component into another
body: <p>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.</p>
  
  <p>Angular has <a href="http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_creating-a-directive-that-wraps-other-elements">"transclude" option</a>.</p>
  
  <p>Rails has <a href="http://guides.rubyonrails.org/layouts_and_rendering.html#understanding-yield">yield statement</a>. If React.js had yield statement, it would look like this:</p>
  
  <pre><code>var Wrapper = React.createClass({
    render: function() {
      return (
        &lt;div className="wrapper"&gt;
          before
            &lt;yield/&gt;
          after
        &lt;/div&gt;
      );
    }
  });
  
  var Main = React.createClass({
    render: function() {
      return (
        &lt;Wrapper&gt;&lt;h1&gt;content&lt;/h1&gt;&lt;/Wrapper&gt;
      );
    }
  });
  </code></pre>
  
  <p>Desired output:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    before
      &lt;h1&gt;content&lt;/h1&gt;
    after
  &lt;/div&gt;
  </code></pre>
  
  <p>Alas, React.js doesn’t have a <code>&lt;yield/&gt;</code>. How do I define Wrapper component to achieve the same output?</p>