React createRef() API问题：this.child.current 为 null 如何解决？

我之前也碰到过一模一样的情况，大概率是这几个常见原因导致的，咱们一步步排查解决：

1. 首先检查ref是否正确绑定到子组件上 #

你可能漏了在render方法里把ref传给<Display>组件。一定要确保render里有这段代码：

render() {
  return (
    <div>
      {/* 关键：把创建好的ref绑定到子组件上 */}
      <Display ref={this.child} data={this.state.data} />
    </div>
  );
}

如果这一步没做，this.child.current肯定是null，因为React不知道要把哪个组件和你的ref关联起来。

2. 检查访问ref的时机是否过早 #

componentDidMount虽然是组件挂载完成的生命周期，但如果你的<Display>是条件渲染的（比如只有当this.state.data有内容时才渲染），那在componentDidMount执行时，data还是空数组，这时候<Display>根本没被渲染，ref自然是null。

举个例子，假设你的render是这样的：

render() {
  return (
    <div>
      {/* 只有data不为空才渲染Display */}
      {this.state.data.length > 0 && <Display ref={this.child} data={this.state.data} />}
    </div>
  );
}

那你需要等到data加载完成、state更新后再访问ref。可以把访问ref的逻辑放在setState的回调里：

updateContent(mainUrl) {
  fetch(mainUrl)
    .then(res => res.json())
    .then(fetchedData => {
      this.setState({ data: fetchedData }, () => {
        // setState回调会在DOM更新完成后执行，这时候Display已经渲染了
        if (this.child.current) {
          // 这里可以安全访问子组件的属性了
          console.log(this.child.current.yourProperty);
        }
      });
    });
}

3. 子组件是函数组件？createRef默认不支持 #

如果<Display>是个函数组件，那createRef()是无法直接获取到它的实例的（因为函数组件没有实例对象）。这时候你需要用React.forwardRef来包裹函数组件，把ref传递进去：

// 改造Display组件
const Display = React.forwardRef((props, ref) => {
  // 如果要暴露子组件的属性/方法，可以用useImperativeHandle
  // 这里先把ref绑定到内部DOM元素，或者自定义需要暴露的内容
  return <div ref={ref}>展示数据：{props.data}</div>;
});

如果Display原本是类组件，那这条可以忽略。

最后再确认一下React版本 #

确保你真的用了React 16.3及以上版本，createRef()是这个版本才新增的，老版本用不了。

内容的提问来源于stack exchange，提问作者Reactor