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

JavaScript

Near小哥西门

2020-03-11

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

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/>。如何定义包装器组件以实现相同的输出？

第604篇《React.js：将一个组件包装到另一个组件中》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

老丝阿飞 2020.03.11

除了Sophie的答案，我还发现了在发送子组件类型中的一种用法，它是这样的：

var ListView = React.createClass({
    render: function() {
        var items = this.props.data.map(function(item) {
            return this.props.delegate({data:item});
        }.bind(this));
        return <ul>{items}</ul>;
    }
});

var ItemDelegate = React.createClass({
    render: function() {
        return <li>{this.props.data}</li>
    }
});

var Wrapper = React.createClass({    
    render: function() {
        return <ListView delegate={ItemDelegate} data={someListOfData} />
    }
});

宝儿村村 2020.03.11

尝试：

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

有关更多信息，请参见文档中的多个组件：子代和子代道具类型。