React.js: agrupando um componente em outro

Muitas linguagens de modelos possuem instruções "slots" ou "yield", que permitem fazer algum tipo de inversão de controle para agrupar um modelo dentro de outro.

Angular temopção "transcluir".

Rails temdeclaração de rendimento. Se o React.js tivesse uma declaração de rendimento, seria assim:

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>
    );
  }
});

Saída desejada:

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

Infelizmente, o React.js não tem um<yield/>. Como defino o componente Wrapper para obter a mesma saída?

questionAnswers(3)

yourAnswerToTheQuestion