Javascript 在React组件上使用querySelectorAll'；孩子们

我试图通过最初只渲染视图中的内容，然后在使用IntersectionObserver向下滚动时，用真实内容替换占位符元素，来惰性地渲染元素列表。这使得列表的长度在我添加新元素时不会发生变化，并且渲染成本更低，因为我只在页面加载时列出空div。就像一个穷人的虚拟化

问题是：

父元素将其子元素添加到IO中，如下所示：

useffect（（）=>{
如果（！observer.current）返回
常量els=[…document.queryselectoral（`.list>：第n个子（n+10}）`]
els.forEach（el=>observer.current.observe（el））
}，[列表]）

---

els

并不总是在React呈现其认为合适的元素时查找元素。问题是，我不知道如何使用ref来实现这一点。使用上下文，我可能可以做到这一点，但我可以想象整个列表会不断重新排序。

我希望这个示例可以帮助您理解如何在您的案例中使用ref。我建议你读书

如果你有任何疑问，请告诉我

const MyItem=React.forwardRef（（props，ref）=>{
返回（{'ITEM'+props.index}）；
});
常量MyList=（）=>{
const[list，setList]=React.useState（[]）；
const refsMap=React.useRef（newmap（））；
const onClickHandler=React.useCallback（（）=>{
集合列表（（以前的列表）=>{
const key=previousList.length；
返回([
…以前的列表，
{
如果（参考）{
refsMap.current.set（键，ref）；
}否则{
refsMap.current.delete（键）；
}
log（refsMap.current.get（key））；
}} />
]);
});
}, []);
返回(
{'ADD'}
{list}
);
};
函数App（）{
返回(
);
}
ReactDOM.render（，document.getElementById（'app'））
将组件保存为这样的状态真的明智吗？