时间戳

首页 > 解决方案 > 如何在没有额外节点的情况下将 HTML 注释添加到 React 组件中？

reactjs - 如何在没有额外节点的情况下将 HTML 注释添加到 React 组件中？

问题描述

这个想法很简单：我想在没有额外节点的情况下将 html 注释添加到呈现的反应中。

这是我的代码：

render(){
  return (
    <div>
      <ul>
        <!-- i want this comment to be here -->
        {items}
        <!-- i want this other comment to be here -->
      </ul>
    </div>
  )
}

我发现的唯一方法是使用这个：

<li dangerouslySetInnerHTML={{ __html: '<!-- comment -->' }} />

但是这个给我添加了一个新的 DOM 节点，我不需要（也不想要）。所以基本上我需要的是生成这样的标记：

<ul>
  <!-- comment -->
  <li></li>
</ul>

有一种方法可以做到这一点，我错过了什么？

编辑：我要解决什么问题？

这里的想法是我使用 React 仅编辑内容，这些内容将作为 HTML 保存到 DB 中。我知道这并不理想，但我们在这里谈论的是 WordPress，所以我们有一些回旋的空间 :)

无论如何，我要解决的问题是我想为未来的我创建某种“钩子”，这样我就可以动态地改变结果（通过 PHP 的搜索和替换，所以伪选择器在这里并不是很有用）。HTML 注释是我认为不使用时不会影响输出的唯一方法。

谢谢！

标签： reactjs

解决方案

您可以简单地使用带有花括号的 javascript 注释。

例子：

render( ){
 return (
   <div>
     {/* LIST STARTS HERE */}
     <ul>

     </ul>
     {/* LIST ENDS HERE */}
   </div>
 )

推荐阅读