如何将 DOMContentloaded 事件监听器添加到 nextJS 中的文档中？

Question

我正在尝试将 html 代码片段添加到我的 nextjs 项目中。该代码片段包含具有 createButton 函数的外部脚本。

<div id="examplebtn"></div>
  <script type="text/javascript">
    //<![CDATA[
    document.addEventListener('DOMContentLoaded', function () {
      createButton('Name', 'Phone');
    });
    //]]>
  </script>
  <script src="https://example.com.na/js/example.js"></script>

createButton 函数呈现一个由 id 标识的按钮（在本例中为 examplebtn），并且在本机 html 文档中它工作正常。但是，在 nextjs 中，我无法将事件侦听器添加到 DOMContentLoaded 事件（如脚本中所示），以便在加载 DOM 后运行该函数。我尝试过使用 Next/Script、useEffect 挂钩、原生 html 标签，但均无济于事。如何在文档完全加载之前将 DOMContentLoaded 事件侦听器添加到 jsx 组件，以便该函数可以在适当的时间运行？预先感谢您的热情帮助。

{编辑} 为了更清楚起见，我添加了 createButton 的最终代码。由于合同义务我无法发布代码，因此对其进行了编辑，但它应该会有所帮助。

window
  .ButtonComponent({
    params,
    onPay: function (v, vn, a, r, e) {
      c = customFunct(moreParams);
      PopupComponent({
        params,
        onCancel: function () {
          console.log('called onCancel');
          // stuff here
        },
        onSubmit: function (r) {
          // stuff here
        },
      }).render('body');
    },
  })
  .render('#examplebtn');

Answer 1

您可以参考GitHub问题

这很棘手，因为这个事件触发得很早......

你可以这样做：

 <script
                dangerouslySetInnerHTML={{
                    __html: `
            window.addEventListener('DOMContentLoaded', () => {
                console.log('DOM fully loaded and parsed');
            });
    `,
                }}
            ></script>

Answer 2

当需要在初始加载时向我们的一些页面添加弹出窗口时，我遇到了非常类似的情况。这个弹出窗口需要注入 html，我还需要对其进行样式和格式化。我可以通过将代码放入公共文件夹内的脚本中并通过 next/script 中的脚本组件调用它来实现此目的。

 <Script 
  type="text/javascript" 
  src="/popup/hubspot.js"
 />
  <Script 
  type="text/javascript" 
  src="/popup/popupLogic.js"
  />

Answer 3

    <div id="examplebtn"></div>
  {    
    document.addEventListener('DOMContentLoaded', function () {
      createButton('Name', 'Phone');
    });  
  }

只需使用块并编写您想要的任何脚本