React Ref：未捕获的 TypeError：无法将属性“innerHTML”设置为 null

Question

我的构造函数中有这些引用

constructor(props) {
    super(props);

    //All Refs
    this.sunglassesTintsTab = React.createRef();
    this.gradientTintsTab = React.createRef();
    this.fashionTintsTab = React.createRef();
    this.lensTintStandardSwatchesContainer = React.createRef();
    this.lensTintMirrorSwatchesContainer = React.createRef();
}

这是我的 componentDidMount

  componentDidMount() {
    console.log('ComponentDidMount Start');
    if (this.state.modalType === 'lensTintsBlokz') {
      this.getLensTintSwatches('blokz');
    } else {
      this.setState({ lensTintsTabsContainerHidden: false });
      this.getLensTintSwatches('sunglasses');
    }
  }

在 getLensTintSwatches 函数中 - 这是在 componentDidMount 中调用的

this.lensTintStandardSwatchesContainer.current.innerHTML = '';
this.lensTintMirrorSwatchesContainer.current.innerHTML = '';

我收到以下错误。

Uncaught TypeError: Cannot set property 'innerHTML' of null

我已经尝试了标准的 React.createRef() 和回调样式 ref，但是所有 refs 的当前值都返回 null。我在这里做错了什么？

更新：我将 ref={this.xyxRef} 作为相应的道具传递 元素。

另一个观察 - componentDidMount 中的 console.log 不是 触发，基于其他控制台错误

这是流程：

Constructor -> Render -> Constructor -> Render -> This ERROR

Answer 1

您收到错误的最可能原因是您的 ref 没有附加到 DOM 元素。如果您不尝试将这些 ref 附加到 DOM 元素，则意味着您没有设置 ref 的初始值。无论哪种方式，错误都表明您的参考值以某种方式为空。因此，您可以：

• 将您的 refs 传递到一个 html 元素（例如 <div ref={myRef} />），然后 React 会自动将您的 ref 的 .current 属性设置为相应的 DOM 节点。
• 为您的参考设置一个初始值。 （据我所知，您无法使用createRef 为引用提供初始值。您可能需要将组件转换为功能组件，然后您可以使用useRef 挂钩为您的引用提供初始值.)

要了解更多关于 refs 的信息，我建议你阅读React's official documentation about refs。