React ref通过呈现为this.props.children的子代传递

Question

我有一个简单的React组件，它包装了另一个组件并提供了一些调整大小的功能。

我很难获得对传递给Resizer的独生子女的参考。即使假设this.props.children是单个节点，似乎也没有一种优雅的方法来请求React对通过子项的引用。

有什么想法吗？

用法

<Resizer>
  <MyColumn />
</Resizer>
<MyBody />

Resizer.js

...
render() {
  return ([
    this.props.children,  // <== I need a ref to this component's DOM node
    <div className="resizer--class"></div>
  ])
}

注意事项：

• 我不想强迫使用者将节点引用传递给<Resizer>
• 我不想将<MyColumn />换成额外的<div>
  • 这有效，但是会更改HTML结构：

      

    <div ref={this.assignChildRef}>{this.props.children}</div>

• 我不想在流量中存储任何状态
• 我不想使用node.previousSibling之类的DOM解决方法，即使从技术上讲这可以使我成为子节点