时间戳

首页 > 解决方案 > 使用 React JS 在所有段落中添加 SPAN 元素

javascript - 使用 React JS 在所有段落中添加 SPAN 元素

问题描述

谁能帮我解决这个问题？

我有一个 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 ？

标签： javascripthtmlreactjsdom

解决方案

首先假设持有该段落的道具是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);
}

上面的方法不应该直接从 render 函数调用，因为它返回的 astring将被打印为 a string。

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

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

最后放开render方法：

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

您需要以dangerouslySetInnerHTMLReact 方式调用 to do things ，有关更多信息，请检查dangerouslySetInnerHTML，但您需要清理内容以防止跨站点脚本 (XSS)

推荐阅读