Reactjs 获取从外部注入的子组件的引用

我们在当前的应用程序中创建了react组件，这些组件将被客户端应用程序像哑组件一样使用

js（webpack的条目）有以下内容

export {Container} from "./path/to/container";
...
export {ComponentN} from "./path/to/componentN";

我们已将其导出为可分发的节点。此repo还包含容器组件

我们在客户端应用程序中包含这个可分发的组件并实例化这些组件

var containerComponent = React.createElement(Container,\*props*\,childControls)
var container = ReactDOM.render(containerComponent,\*the root node*\)

容器代码如下所示

export class Container extends Component{
    constructor(){
        ...
    }

    getValue(){
      \*get the children and call getValue on then and return the aggregate value*\
    }

    render(){
        return <div>{this.props.children}</div>;
    }
}

导出类容器扩展组件{
构造函数（）{
...
}
getValue（）{
\*获取子项并调用getValue，然后返回聚合值*\
}
render（）{
返回{this.props.children}；
}
}

但是现在我们希望在所有这些组件中都有一个接口（getValue（）），因此我们希望引用这些子组件。只要组件遵守此接口，任何控件都可以传递到此容器

因此，在客户端应用程序中，当我们对container.getValue（）执行

container.getValue（）

操作时，它应该对其子项执行

getValue（）

问题是我们无法将ref回调附加到传入的这些子组件，因为ref是只读的。我们也不能克隆这些组件并添加ref回调，因为React.cloneElement禁止它并保留原始ref

那么，我们如何获得对这些子组件的引用，并能够调用这些子组件的getValue（）函数呢

如果有更好的方法来完成整个过程，请提出建议