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()就好了

Answer 2

按你所说的情况想了下，可以把reload方法赋到高阶组件去。高阶组件传一个方法下来

setReload(reload) {
  this.reload = reload;
}

子组件在生命周期把reload给高阶组件

componentDidMount() {
  this.props.setReload(this.reload.bind(this));
}

Answer 3

不是很懂你的实际功能和需要是什么样的。试试父组件给子组件传递一个条件 prop，子组件根据 prop 调用自己方法呢？

子组件中：

componentWillReceiveProps(nextProps) {
    if(nextProps.load) this.load();
}

如果是只需要加载时判断一次是否执行的，那就放在 componentDidMount 中。