使用 React JS 在所有段落中添加 SPAN 元素答案

【问题标题】：Prepending a SPAN element inside all paragraphs with React JS使用 React JS 在所有段落中添加 SPAN 元素
【发布时间】：2019-01-25 13:37:47
【问题描述】：

谁能帮我解决这个问题？

我有一个包含一堆段落元素的 HTML 文档，我想在它的开头放置一个元素。内容由用户创建，例如使用 WYSIWYG 编辑器。

例如：

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

应该变成：

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

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

【问题讨论】：

Append element in tag right before contents with Javascript的可能重复
这听起来不像是 React 的有效用例，即使 React 可以做到这一点，你最好还是使用原生 JavaScript：const pTags = document.querySelectorAll('p');for (let i = 0; i < pTags.length - 1; i++) { pTags[i].prepend(document.createElement('span')); }
ReactJs 建议不要在其范围之外操作 DOM。这将阻止 react 跟踪 DOM 树并因此正确更新它

标签： javascript html reactjs dom

【解决方案1】：

首先假设保存该段落的道具是content。

在渲染内容之前，您需要对其进行解析并将其更改为String，以便将此方法添加到您的组件中

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

不应直接从渲染函数调用上述方法，因为它返回一个string，它将被打印为string。

为了解决这个问题，我们需要另一种方法（在这种情况下将充当中间件）：

renderAsHTML( content ){
    return(
      {__html:this.AddLeadingSpan( content ) }
    )
}

终于放开了render方法：

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

您需要调用 dangerouslySetInnerHTML 来以 React 方式执行操作，有关更多信息，请查看 dangerouslySetInnerHTML，但您需要清理内容以防止 cross-site scripting (XSS)

【讨论】：