时间戳

首页 > 解决方案 > 从 Mongodb 字符串中反应电话卡文本并且没有看到换行符

reactjs - 从 Mongodb 字符串中反应电话卡文本并且没有看到换行符

问题描述

我正在从 mongodb 调用一个字符串并将其放入这样的卡体中：

                    {this.state.news.map(item => (
                        <Card
                            title={item.headline}
                        >

                            {item.description}

                        </Card>
                    ))};

我在页面上看到的所有内容看起来都像是一大块纯文本。我尝试了各种方法/n <br/>，<br />但都无济于事。

经过一些建议后，我尝试将 重新添加/n到这样的字符串和<pre>标签中。

                    {this.state.news.map(item => (
                        <Card
                            title={item.headline}
                        >
                            <div className="storyText">

                                    <pre>
                                        {item.description}
                                    </pre>

                            </div>
                        </Card>
                    ))};

和匹配的CSS 

.storyText{
  white-space: pre ; 
}

但是其中任何一个都完全破坏了我的网格并破坏了页面（当然以不同的方式）。

屏幕截图： 捕获带有文本的卡片

标签： reactjsreact-bootstrap

解决方案

如果您只关心段落和换行符，我已通过按段落拆分、映射这些段落，然后按换行符拆分来解决此问题。以下代码举例说明了如何做到这一点。为简单起见，您可以将其分解为自己的组件。

<div>
  {item.description.split("\n\n").map((paragraph, i) => {
    return (
      <p key={`para-${i}`}>
        {paragraph.split("\n").map((line, j) => {
          return (
            <React.Fragment key={`line-${j}`}>
              {line}
              <br />
            </React.Fragment>
          );
        })}
      </p>
    );
  })}
</div>

我整理了一个快速的代码框演示，在这里展示了这一点。

推荐阅读