反应cloneElement，如何修改'this'？

Question

我有一个JSX文件：

1自定义组件'Parent'

2来自语义的一些预定义UI组件：'Segment'

<Parent lst={["a","b","c"]}>
  <Segment>
    <Segment>
      {this.props.content}
    </Segment>
  </Segment>
</Parent>

我们的想法是，Parent组件将迭代this.props.lst，并使用React.cloneElement克隆外部Segment组件，并将'content'属性设置为每个列表项。

不幸的是，这不起作用，因为： 1.细分不会将其属性传递给儿童 2.内部Segment组件中的'{this.props.content}'中的'this'指向Parent的道具。

我尝试使用refs：

<Parent lst={["a","b","c"]}>
  <Segment ref="outer">
    <Segment>
      {this.refs.outer.props.content}
    </Segment>
  </Segment>
</Parent>

在'外部'上使用React.cloneElement后出现此错误，在内部段中未定义this.refs.outer

如何克隆组件层次结构并在其中一个内部组件上设置属性？

示例代码：http://jsfiddle.net/69z2wepo/78061

Answer 1

如果我正确理解您的意图（在道具可见性/可访问性方面），除了this.props.content之外，您可以将<Parent />作为道具传递给lst组件。这样，Parent可以执行其子项的克隆，并将content属性设置为外部Segment，因为它可以从内部访问。

<Parent lst={["a","b","c"]} content={this.props.content}>
  <Segment>
    <Segment>
      {this.props.content}
    </Segment>
  </Segment>
</Parent>

然后在Parent内部渲染方法：

render() {
  return React.cloneElement(this.props.children, this.props.content);
}

这应保留外部Segment组件的原始子项，因为如果将新子项作为方法的第3个参数传递，cloneElement将仅替换现有子项。