为什么在我的情况下换行符不起作用？

Question

这行是行不通的：

const modalContent = () => `First line.\nSecond line?`;

我在我的组件的React应用程序中使用它。

Answer 1

在字符串中创建新行：

 const modalContent = () => `First line.\\nSecond line?` console.log(modalContent()); 

…但是HTML中的新行与其他任何空白一样。

 First line. Second line? 

您需要一个<br>元素而不是换行符，或者需要一个CSS来将white-space设置为新行有效的值（例如pre ）。

 First line.<br> Second line? 

Answer 2

在普通的HTML中，换行符的处理就像普通的空格一样。 有两种解决方案。

1. 您使用CSS告诉周围的html元素，换行符和空格很重要。 这是通过将样式white-space设置为pre 。

2. 您可以将函数的返回值设置为一个jsx而不是字符串。 然后，您可以将br元素用于换行符：

const modalContent = () => <span>First line.<br/>Second line?</span>;

Answer 3

因为您正在使用反引号。 这类似于ES6中的模板字符串。 它将尊重实际字符串中的任何空行。 \\ n适用于带单引号或双引号的常规字符串

所以：

 const multi = ` this is multiline text `; const text = "this is not \\nmultiline\\ntext"; console.log(multi); console.log(text)