Question

我们在当前的应用程序中创建了反应组件，这些组件将被客户端应用程序用作哑组件。

index.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（）），因此我们希望引用这些子组件。只要组件符合此接口，就可以将任何控件传递给此容器。

所以在客户端应用中我们执行container.getValue()后会对其子女执行getValue()。

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

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

如果对整个方法有更好的方法，请建议。

得到从外部注入的子组件的引用

0 个答案: