Javascript 使用React JS在所有段落中预加SPAN元素

有人能帮我解决这个问题吗

我有一个HTML文档，里面有一堆段落元素，我想在它的开头放一个元素。内容由用户创建，例如使用所见即所得编辑器

例如：

这里写了一些文字

这里呢

这里呢

应成为：

<p><span></span>Some text was written here</p>
<p><span></span>and here</p>
<p><span></span>and here</p>

这里写了一些文字

这里呢

这里呢

---

既然我不能直接修改DOM，有没有办法用ReactJS做这样的事情？

首先让我们假设保存段落的道具是

content

在呈现内容之前，您需要对其进行解析并将其更改为

字符串

，以便将此方法添加到组件中

AddLeadingSpan( content ){

    // pattern for the openeing P tag
    const targetEl = /<p>/gi;

    // substitute for the matching result
    const subsEl = "<p><span>im a span tag </span>"; // add some text for relevance

    // simply use the native string API to do the replacement
    return content.replace( targetEl, subsEl);
}

最后转到渲染方法：

 render(){
     return(
         <div dangerouslySetInnerHTML={this.renderAsHTML( this.props.content )}>
         </div>
     )
 }

render（）{
返回(
)
}

---

您需要调用

DangerouslySetinerHTML

以React方式进行操作，以获取更多信息检查，但您需要清理内容以防止

可能重复的内容听起来不像React的有效用例，即使React可以做到这一点，您最好还是使用本机JavaScript:

constptags=document.querySelectorAll（'p'）
for（让i=0；i
ReactJs建议不要在其作用域之外操纵DOM。这将阻止react跟踪DOM树，从而正确更新它
renderAsHTML( content ){
    return(
      {__html:this.AddLeadingSpan( content ) }
    )
}

 render(){
     return(
         <div dangerouslySetInnerHTML={this.renderAsHTML( this.props.content )}>
         </div>
     )
 }