前端之家

  1. 首页
  2. 问答

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

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

屏幕截图： capture of card with text

tao199107 回答：从Mongodb字符串反应电话卡文本并且没有看到换行符

如果您只关心段落和换行符，我已经解决了这个问题，方法是按段落拆分，映射这些段落，然后按换行符拆分。以下代码给出了如何完成此操作的示例。为简单起见，您可以将其分解为自己的组件。

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

我整理了一个快速的codeandbox演示，将其演示为here。

,

所以工作代码最终看起来是什么样子（以防以后有人在寻找同样的问题）... 

                        {this.state.news.map(item => (
                            <Card
                                title={item.headline}
                            >
                                <div className="storyText">
                                    {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>
                            </Card>
                        ))};
react-bootstrapreactjs
本文链接：https://www.f2er.com/3092000.html

大家都在问