Question

我正在尝试渲染一个带有注释的html组件，以便注释在DOM中显示为注释。

我目前有

<head>
    <title>{props.pageTitle}</title>
</head>

但我想要

<head>
    <title>{props.pageTitle}</title>

    <!-- Some information here --> 

</head>

我想避免使用以下内容：

dangerouslySetHtml
element.innerHTML = "...";
element.outerHTML = "...";

Answer 1

安装组件后，您可以检索当前的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}中呈现注释

1 个答案: