Question

有人可以帮助我解决这个问题吗？

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

由于无法直接修改DOM，有没有办法使用 ReactJS 做这样的事情？

Answer 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的事实，因此不应直接从render函数中调用上述方法。

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

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)

的攻击。

在所有段落中的SPAN元素前加上React JS

1 个答案: