当标记附加在文本中时，reactjs无法识别html标记(reactjs cannot recognize html tags when the tag is appended in the text

当标记附加在文本中时，reactjs无法识别html标记(reactjs cannot recognize html tags when the tag is appended in the text)

我是新的反应，我试图找到以下情况的最佳方法：

我有一大块文本，我需要首先将它拆分为段落级别并将每个段落包含在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> ); }

}

你可以看到我有一个解决方法，我返回一个句子数组，然后我遍历它们并跨越每个句子。但是，我喜欢做的是这样的：

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包装文本我打开浏览器时看到这样的文本：

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

I am new tor react and I trying to find the best way for the following scenario:

I have a big chunk of text and I need to first split it to paragraph level and wrap each paragraph in span and then put the whole result in a span.

Here is my code which is working now:

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

}

As you can see I have a work around and I return an array of sentences and then I loop through them and span each sentence. However, what I like to do is something like this:

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

So here I create the text with span and instead of looping through an array I would like to do this:

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

But this does not work and instead of having a text wrapped with span I see a text like this when I open browser:

So the span is not recognized as an html tag. Now my question is , is there any way to do this via the second approach?