如何在字符串中替换\ n新行字符,以便<p>标记可以显示新行

时间:2018-10-31 09:05:28

标签: javascript html reactjs

在我正在使用的React应用程序中,存在以下条件:

当字符串具有换行符

要在其中显示字符串的

<p>{string}</p>标签应替换为HTML新行字符。

但是,这当然行不通。

我已经尝试过但对我不起作用的东西:

const string = Hello\nHii

  1. <p>{string.replace('\n', <br />)}</p>

输出:

Hello<br />Hii

  1. <p>{string.replace('\n', &amp;)}</p>

输出:

Hello Hii

我在以下答案中找到了上述建议:

the val of a textarea doesnt take new lines into account

1 个答案:

答案 0 :(得分:3)

有两个选项。

  1. 使用pre标签或CSS属性white-space: pre

    <p><pre>{string}</pre></p>

  2. 使用dangerouslySetInnerHTML

    <p dangerouslySetInnerHTML={{__html: string.replace('\n', '<br />')}}></p>