react 中渲染生命周期
在 react 中，组件的生命周期包括以下阶段：
渲染完成的生命周期
其中，componentdidmount 生命周期方法表示组件已挂载到 dom 中。在该阶段，react 已完成渲染过程，可以通过 dom 操作对其进行修改。
避免 document.queryselector 查询错误
在你的代码中，错误出在 useeffect 中的 document.queryselector 查询。由于渲染尚未完成，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？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
141
