React.js: Zawijanie jednego komponentu w drugi

Wiele języków szablonów ma instrukcje „sloty” lub „yield”, które umożliwiają wykonanie inwersji sterowania w celu zawinięcia jednego szablonu w inny.

Angular maopcja „transkluzuj”.

Railsy majądeklaracja rentowności. Gdyby React.js miał deklarację wydajności, wyglądałoby to tak:

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

Pożądane wyjście:

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

Niestety, React.js nie ma<yield/>. Jak zdefiniować komponent Wrapper, aby uzyskać ten sam wynik?

questionAnswers(3)

yourAnswerToTheQuestion