javascript - 如何替换\n字符串中的新行字符，以便 <p> 标记可以显示新行

Question

在我正在开发的 react 应用程序中，有一个条件:

当字符串有换行符时

<p>{string}</p>要显示字符串的标签应替换为 HTML 换行符。

但这当然行不通。

我已经尝试过但对我不起作用的事情:

const string = Hello\nHii

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

输出:

Hello<br />Hii

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

输出:

Hello Hii

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

the val of a textarea doesnt take new lines into account

Answer 1

有两个选项。

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

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

2. 使用dangerouslySetInnerHTML :

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