javascript – React.js:将一个组件包装到另一个组件

许多模板语言有“slots”或“yield”语句,允许做某种控制的反转,以将一个模板包装在另一个模板内。

Angular有“transclude” option

Rails有yield statement.如果React.js有yield语句,它看起来像这样:

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

所需输出:

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

唉,React.js没有< yield /&gt ;.如何定义Wrapper组件以实现相同的输出?

尝试:

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

有关详细信息,请参阅文档中的Multiple Components: ChildrenType of the Children props

http://stackoverflow.com/questions/20851533/react-js-wrapping-one-component-into-another

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – React.js:将一个组件包装到另一个组件