如何从添加到Web应用程序的脚本标签中添加突变观察器？

问：

我有一个 Web 应用程序，其中在 HTML 中添加了脚本标签。

script 标记附加脚本，在 id = 'header' 处创建 DOM。现在我想在每次重新渲染整个 DOM 时触发效果。（添加我的脚本标签的位置）。下面是一个示例：

<div>
<script ... />
<div id="header"></div>
</div>

现在这个 div 基于多个参数重新渲染，并且在重新渲染我的 DOM 项时会丢失 script 标签添加的 UI 组件。我试着把突变观察者放成这样：

useEffect(() => {
const onElementMutate = () => setElementReady(true)
    const observer = new MutationObserver(onElementMutate)
    const observerConfig = { childList: true, subtree: true }

const target = document.getElementById(elementId)

      if (target) {
        observer.observe(target, observerConfig)
        setElementReady(true)
      }

return () => {
      observer.disconnect()
    }
},[])

我根据元素是否准备就绪返回：return elementReady ? ReactDOM.createPortal(<Component />, document.getElementById(elementId) as any) : null

但由于某种原因，突变观察器没有按预期工作。事实上，它根本没有触发。有人可以帮我弄清楚这里出了什么问题以及如何处理这个问题吗？

下面是一个更新的示例：

这是我的主要app.jsx：

import "./App.css";
import NewApp from "./NewApp";
import { useEffect, useState } from "react";

function App() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const element = document.getElementById("observer");
    const observer = new MutationObserver((data) => {
      console.log("Data = ", data);
    });
    if (element) {
      observer.observe(element, { childList: true });
    }
    return () => observer.disconnect();
  }, [show]);
  return (
    <div className="App">
      <NewApp show={show} setShow={setShow} />
      {!show && <button onClick={() => setShow(true)}>Show</button>}
    </div>
  );
}

export default App;

这是我的 NewApp 组件：

const NewApp = ({show,setShow}) => {
  return show ? (
    <div id='observer'>
    <div>Showing...</div>
    <button onClick={() => setShow(false)}>Dont Show</button>
    </div>
  ) : null
};
export default NewApp;

现在，我希望当 NewApp 在 DOM 中消失或重新出现时触发观察器函数。