在 React 或 Vue 组件中渲染文本时，要让换行符生效。

有时，你会在 React 组件中收到一个无法控制的字符串（例如来自 CMS 或 API 的字符串）。它可能看起来像这样：

"Wow I am so cool \n I'm a JavaScript haiku \n render my newlines"

\n但是，如果你像这样把它放到 React（或 Vue）组件中，这些小字符就不会被识别：

const haiku = "Wow I am so cool \n I'm a JavaScript haiku \n render my newlines"

function BeautifulHaiku() {
  return <div>{haiku}</div>
}

如果你想改变这种行为并获得你想要的换行符，你有几个不错的选择。

替换\n为<br />

首先，你可以将字符串拆分，然后渲染生成的<br />标签。

function replaceWithBr() {
  return haiku.replace(/\n/g, "<br />")
}

在 React 中，你可以使用dangerouslySetInnerHTML它来实现这一点：

<p dangerouslySetInnerHTML={{__html: replaceWithBr()}} />

（之所以称之为“危险”，并非因为 React 团队想显得很酷，而是因为你必须小心在其中输入的内容，以避免恶意脚本。）

在 Vue 中，你可以使用v-html以下方法来实现这一点：

<p v-html="replaceWithBr()">{{haiku}}</p>

使用 CSSwhite-space

另一种方法是使用white-spaceCSS 属性并将其设置为pre-wrap或pre-line。

.css-fix {
  white-space: pre-wrap; /* or pre-line */
}

这两个功能确保文本在内容中出现换行符时自动换行，并且pre-line专门将多个空格合并为一个空格。

这同样适用于 React 和 Vue！

证明给我看，卡西迪

好吧，那就逼我吧！

以下是 React 的实际应用示例：

以下是 Vue 的示例！

“他们性格不同，但他们是朋友”——DJ Khaled

坦白说：我不是 Vue 开发者，这只是我尝试时碰巧成功了而已。我知道这在 React 里是“正确”的做法，但我对 Vue 还不太了解，因为我是个新手。祝你好运，玩得开心，做出正确的选择，待人友善，好好写代码。

希望这对您有所帮助！