React组件渲染完成后如何安全地操作DOM？

react 中渲染生命周期

在 react 中，组件的生命周期包括以下阶段：

• componentwillmount（已废弃，使用 componentdidmount 代替）
• componentdidmount
• componentwillreceiveprops
• shouldcomponentupdate
• componentwillupdate
• componentdidupdate
• componentwillunmount

渲染完成的生命周期

其中，componentdidmount 生命周期方法表示组件已挂载到 dom 中。在该阶段，react 已完成渲染过程，可以通过 dom 操作对其进行修改。

避免 document.queryselector 查询错误

在你的代码中，错误出在 useeffect 中的 document.queryselector 查询。由于渲染尚未完成，dom 中可能尚未存在要查询的元素，导致报错。

解决方法

有以下几种解决方法：

• 将 useeffect 移动到 componentdidmount 中。
• 使用 useref 钩子获取 dom 节点。
• 异步调用 document.queryselector。
• 在 react 状态中管理 dom 节点引用（推荐）。

示例代码

在你的代码中，你可以将 useeffect 移动到 componentdidmount 中：

export default function SubContainer (props: SubContainerProps){ 

  // ...

  useEffect(() => {
    if(props.scrollToIdx) {
      const container = document.querySelector("#container");
      const div = document.querySelector(`#item-${props.scrollToIdx}`);
      // ...
    }
  }, []); // 空依赖项，componentDidMount 只执行一次

  // ...

}

以上就是React组件渲染完成后如何安全地操作DOM？的详细内容，更多请关注硕下网其它相关文章！