我是新的反应,我试图找到以下情况的最佳方法:
我有一大块文本,我需要首先将它拆分为段落级别并将每个段落包含在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包装文本我打开浏览器时看到这样的文本:
<span>some text</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:
<span>some text</span>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?
最满意答案
您可以使用reactly dangerouslySetInnerHTML如下所示:
<div className="col-xs-10 txt-align-left body-text" dangerouslySetInnerHTML={this.paragraphGenerator(this.props.storyText)}></div>链接到文档: 文档
You can use the react property dangerouslySetInnerHTML like so:
<div className="col-xs-10 txt-align-left body-text" dangerouslySetInnerHTML={this.paragraphGenerator(this.props.storyText)}></div>Link to documentation: Docs
更多推荐
发布评论