react高阶组件如何调用子组件的方法较好？

Question

我有一个普通得表格组件DataGrid,一个高阶组件Mask会把传入的组件外面包一层遮罩组件，使得原来得组件拥有显示和隐藏遮罩的功能。

现在的问题是，原来如果某个页面中直接使用DataGrid，我可以直接给DataGrid加一个ref(比如articleGrid),然后可以使用this.refs.articleGrid.reload(), reload是DataGrid上的方法。

但是加了包裹了高阶组件后，就不能直接使用，还要在高阶组件中给要结合的组件加上ref才行，就变成了this.refs.articleGrid.refs.wrappedComp.reload()

如果是更复杂的情况写法就更恶心，现在我有点怀念继承了。。

请问有什么好的实践处理这种问题得吗。

Answer 1

首先，感觉你的设计有点问题，按照一般逻辑，应该是DataGrid包含Mask，而不是Mask包含DataGrid。所以感觉你这里用高阶组件很奇怪。。。如果是DataGrid包含Mask的话，那么就很容易了，不多说其次，官网上已经不推荐直接使用refs了，而是通过获取目标组件的instance。安利一下自己的文章，React高阶组件(HOC)模型理论与实践，其他部分写得不好，不用看。所以，其实你不需要用那么多refs来获取目标组件，直接this.dataGrid.load()就好了