将 HTML 注入 React/Next.js 站点答案

【问题标题】：Inject HTML into React/Next.js Site将 HTML 注入 React/Next.js 站点
【发布时间】：2021-10-16 22:40:33
【问题描述】：

我的任务是改进在 React (Next.js) 上运行的外部服务的 UI/UX。该公司表示，他们提供的唯一定制是 JavaScript 文本编辑器，并在那里注入更改。问题是，我似乎无法附加到虚拟 dom。此文本编辑器创建一个 JavaScript 文件，然后将其加载到 <body> 元素的正下方。

是我遗漏了什么，还是这不可能？

const nav = document.getElementsByClassName('userbar-wrapper')[0];
nav.insertAdjacentHTML('afterend', 'additional HTML code');

我收到以下错误：

Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of undefined

【问题讨论】：

您收到的错误消息最终是说页面上没有类名为“userbar-wrapper”的元素。也许您应该寻找另一个类名？
该元素有三个类：userbar-wrapper、is-alternative-version、fixed。我认为问题在于该站点是 React 和虚拟 dom，我无法注入任何东西。我提供的区域最终成为加载到标题中的 javascript 文件。
“自定义 javascript”究竟是在何时何地调用的？调用脚本时，React 可能还没有渲染任何东西。
它在<body> 标签的正下方被调用。我很确定这不会起作用 - 尽管这是他们的开发团队的建议。我只是想确保我没有遗漏任何东西。我浏览了文档，但什么也没看到。

标签： javascript reactjs next.js

【解决方案1】：

由于代表人数少，我无法添加评论，但是看起来您正在造成副作用，因此您希望将代码包装在 useEffect() 挂钩中，例如下面。

useEffect(() => {
    const nav = document.getElementsByClassName('userbar-wrapper')[0];
    nav.insertAdjacentHTML('afterend', 'additional HTML code');
}, []);

【讨论】：

我同意 - 如果我可以访问代码本身，我可以轻松完成此操作。但是，我只在一些事后考虑的管理面板中提供了一个文本字段，该面板创建了一个在标题中调用的 Javascript 文件。
我明白了。抱歉，您的原始评论很难理解。在这种情况下，老实说，我什至不会考虑进行这些请求的更改——这是产品所有者的工作，即使你可以按照你的要求去做，这也不是你应该做的事情。由于产品负责人可能不会为您进行更改，因此他们应该详细说明您如何进行所需的更改。