我正在尝试渲染一个带有注释的 html 组件，以便注释在 DOM 中显示为注释。
我目前有
<head>
<title>{props.pageTitle}</title>
</head>
但是我想要
<head>
<title>{props.pageTitle}</title>
<!-- Some information here -->
</head>
我想避免使用以下内容：
dangerouslySetHtml
element.innerHTML = "...";
element.outerHTML = "...";
组件安装后，您可以检索当前的 DOM 元素，然后应用一些 DOM 操作将 HTML 注释放置在您需要的位置。您可以在下面找到一个由 HTML 注释包裹的组件的示例。
componentDidMount() {
// Get current node
let currentNode = ReactDOM.findDOMNode(this);
// Get parent node
let parentNode = currentNode.parentNode;
// Create the comment to insert before
let commentBefore = document.createComment("Begin Tag");
parentNode.insertBefore(commentBefore, currentNode);
// Create the comment to insert after
let commentAfter = document.createComment("End Tag");
parentNode.insertBefore(commentAfter, currentNode.nextSibling);
}
我找到了一种几乎立即插入注释且无需包装器的方法，但它仅在从服务器端渲染时才有效（参见此答案），因此它不会更新客户端上的状态。
如果您需要插入一些信息供人们阅读（例如调试元数据或复活节彩蛋），这应该足够了。但是，如果您的 HTML 是由不运行文档中的脚本的程序进行后处理的，那么它只会看到带有代码的
<script>"use client";
export default function Comment({ text }) {
if (typeof window === "undefined") {
const code = `document.currentScript.outerHTML = "<!-- ${text} -->"`;
return <script>{code}</script>;
}
}