React 添加事件 DOMContentLoaded 和 useEffect

Question

我试图在 DOM 加载后向元素添加事件侦听器，以便使用 Materialise CSS 的浮动操作按钮。

请参阅下面的代码，效果函数被触发，但handleContentLoaded函数没有被触发。该组件渲染时没有错误。

这里缺少什么？这是使用此效果的正确方法吗？

  const handleContentLoaded = () => {
    console.log("handleContentLoaded fired");
    var elems = document.querySelectorAll(".fixed-action-btn");
    var instances = M.FloatingActionButton.init(elems, {});
    console.log("instances", instances);
  };

  useEffect(() => {
    console.log("using effect");
    document.addEventListener("DOMContentLoaded", handleContentLoaded);
  }, []);

Answer 1

尝试删除 addEventListener，useEffect 在页面的所有元素正确呈现后运行，您不需要任何侦听器：

useEffect(() => {
  console.log("using effect");
  handleContentLoaded();
}, []);