React Add event DOMContentLoaded with useEffect

Question

我正在尝试在加载 DOM 后向元素添加事件侦听器，以便使用 Materialize 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();
}, []);