ReactJS TypeError: Cannot read property 'offsetHeight' of null

在使用ReactJS编写代码时，如果出现了这个错误，说明你正在尝试读取一个空值的属性。

错误原因

这个错误通常出现在使用React的ref属性时，当React尝试在组件的未挂载时读取该属性上的DOM节点属性值时，就会导致这个错误。

解决方法

1. 确保组件的DOM元素正确挂载

在React中，组件有三个主要的生命周期方法：componentWillMount()、componentDidMount()和render()。在使用ref属性时，我们需要将ref标记放在组件的DOM元素上，然后在componentDidMount()中使用ref来引用该DOM元素。

如果你的组件DOM元素没有被正确挂载，那么React在读取DOM元素属性时就会得到一个空值，导致这个错误的发生。

2. 使用React.createRef()来创建ref

使用React.createRef()方法来创建ref可以避免这个错误。这个方法会创建一个空的ref对象，当ref被赋给组件的DOM元素后，该对象将指向该DOM元素。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current.offsetHeight);
  }

  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}

3. 使用条件渲染

在React中，有时需要根据条件来渲染组件。在这种情况下，如果组件被渲染时，ref所引用的DOM元素尚未挂载，就会发生这个错误。

为了避免这个错误，可以在组件渲染前检查ref是否为空，如果是，则不对其进行任何操作。例如：

render() {
  return this.state.show && <div ref={this.myRef}>Hello, world!</div>;
}

参考资料

• ReactJS TypeError: Cannot read property 'offsetHeight' of null