Javascript 侦听react中元素的渲染

如何在React中侦听具有特定id的元素的呈现

我正在尝试创建一种方法，向我们网站的用户展示“情境化提示”，指导他们尝试新功能。例如，当用户转到我们的主页时，我想在新的页面链接旁边放置一条标注消息。最后，我们希望这能让我们的用户更频繁地使用新功能

为此，我正在创建一个组件，其中包含一个元素id列表，我们也希望附加详图索引。每当使用这些id之一渲染元素时，我都希望在其旁边渲染一个详图索引

我有用于呈现标注的实际UI组件（使用fluent UI的Coachmark/Teaching bubble），但我一直在努力理解如何编写包含组件，以识别存在的元素的id，我们希望为其呈现一个教学bubble（即侦听器）

我尝试创建一个使用效果，当这些id出现时，只要元素出现，就设置一个状态变量。为此，我映射了每个id，并检查document.querySelector是否为其返回了元素；但是，我收到一个错误，说它无法进行静态检查。似乎每当DOM发生变化时，都不会重新检查依赖关系数组

useEffect(() => {
    console.log('list is present!');
}, [idsToCheck.map(id=> !!document.querySelector(id))]);