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