当标签附加在文本中时，reactjs 无法识别 html 标签

Question

我是 React 新手，我正在尝试为以下情况找到最佳方法：

我有一大段文字，我需要先将其拆分为段落级别并将每个段落包装在 span 中，然后将整个结果放在一个 span 中。

这是我现在可以使用的代码：

/**
* Created by hminaee on 12/26/2016.
 */
import  React from "react";
require("../../../../css/story/body/story-body.css");
require("../../../../css/common/common.css");
export class StoryBodyText extends  React.Component{
constructor(props){
    super();
}
componentWillMount(){
}
componentDidMount(){

}

/**
 *
 * @param text
 * @returns {string}
 */
paragraphGenerator(text){
    var paragraphs=text.split(/\n/g) ;
    return paragraphs;
}


render() {
    return (
        <div className="col-xs-12">
            <div className="col-xs-1"></div>
            <div className="col-xs-10 txt-align-left body-text">{this.paragraphGenerator(this.props.storyText).map((item,i)=> <span >{item}</span>)}</div>
            <div className="col-xs-1"></div>
        </div>
    );
}

}

如您所见，我有一个解决方法，我 return 一组句子，然后循环遍历它们并跨越每个句子。然而，我喜欢做的是这样的：

 paragraphGenerator(text){
    //var example = "X Y\nX1 Y1\nX2 Y2. mmmmm";
    var paragraphs=text.split(  /\n/g) ;
    var wrapedText="";
    for(var i=0;i<paragraphs.length;i++){
        wrapedText=wrapedText+"<span>"+paragraphs[i]+"</span>";
    }
    return wrapedText;
}

所以在这里我创建了带有 span 的文本，而不是遍历数组我想这样做：

<div className="col-xs-10 txt-align-left body-text">{this.paragraphGenerator(this.props.storyText)}</div>

但这不起作用，当我打开浏览器时，我看到的不是用 span 包裹的文本：

<span>some text</span>

所以跨度不被识别为 html 标签。现在我的问题是，有没有办法通过第二种方法做到这一点？

Answer 1

您可以像这样使用反应属性 dangerouslySetInnerHTML：

<div className="col-xs-10 txt-align-left body-text" dangerouslySetInnerHTML={this.paragraphGenerator(this.props.storyText)}></div>

Link 到文档：Docs

当标签附加在文本中时，reactjs 无法识别 html 标签

reactjs cannot recognize html tags when the tag is appended in the text

reactjs

react-jsx