小编典典

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

reactjs

许多模板语言都有“ slots”或“ yield”语句,它们允许进行某种形式的控制反转,以将一个模板包装在另一个模板中。

Angular具有“ transclude”选项

Rails有收益声明。如果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,React.js没有<yield/>。如何定义包装器组件以实现相同的输出?


阅读 327

收藏
2020-07-22

共1个答案

小编典典

尝试:

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

有关更多信息,请参见文档中的多个组件:子代子代道具类型

2020-07-22