Question

我今天有以下组件，它代表一个具有标题和不同行的容器盒。这是它的外观：

var Box = React.createClass({
  render: function() {
    return (
      <BoxHeading title={this.props.headingTitle}/>
      <BoxBody rows={this.props.rows} />
    )
  }
});

var BoxBody = React.createClass({
  render: function() {
    return (
      {this.rows()}
    )
  }

  rows: function() {
    return _.map(this.props.rows, function(row) {
      return (
        <HouseRow />
      );
    }, this);
  }
});

现在我的问题是：如果我想重复使用Box＆amp; BoxBody但不是使用我想使用另一种Row，我该怎么做？

我会将我想要的那种组件作为行传递给Box吗？

那么，我会做<Box rowType={<HouseRow} />或类似的事情吗？

Answer 1

您选择的方法看起来非常好 - 只要它具有正确的界面，您基本上可以将Box与您想要的每种类型的行组合在一起。它被称为Object Composition，是软件工程中合法且备受尊重的模式。

唯一的一点是，在React中你应该不是通过传递已经渲染的组件，而是通过传递组件类，如下所示：

<Box rowComponent={ HouseRow } />

如您所见，您不需要使用括号。在内部组件中，您可以执行以下操作：

var RowComponent = this.props.rowComponent;
return (
   <RowComponent />
);

Answer 2

<Box rowType={HouseRow} />

这正是你要做的。将来自组件的动态内容作为来自父级的道具传递。然后在你的行函数中，return <{@props.rowType} />应该可以正常工作

如何重用具有不同标记的React组件？

2 个答案: