【问题标题】:Render a comment in the html of a react component在 react 组件的 html 中渲染注释
【发布时间】:2018-02-16 19:02:52
【问题描述】:

我正在尝试渲染一个带有评论的 html 组件,以便评论在 DOM 中显示为评论。

我现在有

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

但我想拥有

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

    <!-- Some information here --> 

</head>

我想避免使用以下内容:

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

【问题讨论】:

标签: javascript html reactjs


【解决方案1】:

安装组件后,您可以检索当前的 DOM 元素,然后应用一些 DOM 操作将 HTML 注释放置在您需要的任何位置。您可以在下面找到一个由 HTML cmets 包装的组件示例。

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

【讨论】:

  • 注意:这不适用于ReactDOMServer.renderToStaticMarkup
猜你喜欢
  • 2018-01-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-03
  • 1970-01-01
  • 2021-06-07
  • 1970-01-01
  • 2018-09-14
相关资源
最近更新 更多