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

Question

这是不起作用的行：

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

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

Answer 1

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

1. 你用css告诉周围的html元素换行符和空格很重要。这是通过将样式white-space设置为pre来完成的。

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

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

Answer 2

在字符串中创建新行：

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 3

因为你正在使用反引号。这类似于 ES6 中的模板字符串。它将遵循实际字符串中的任何空行。 将在带有单引号或双引号的常规字符串中工作

所以：

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