在react组件的html中渲染注释

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);
}

在react组件的html中渲染注释

问题描述

1 个解决方案

解决方案1
1 2017-11-21 21:19:05

在react组件的html中渲染注释

问题描述

1 个解决方案

解决方案1 1 2017-11-21 21:19:05

解决方案1
1 2017-11-21 21:19:05