在JSX表达式中动态添加换行符

Question

我正在制作一个React应用程序，从API中获取歌曲的歌词。

API返回一个lyrics_body字符串，我使用它来显示页面上的歌词，问题在于当React渲染时，它看起来并不是很好看，因为API返回以下内容：

They say "Oh my god I see the way you shine"↵Take your hand, my dear（这是API返回的歌词数据的一部分）

这个字符：↵ 是一个问题，虽然他们给了我一个换行符，但实际上看起来并不好看。因此，我决定将该字符替换为<br />

这是我的代码片段：

<div className="card-body">
   <p className="card-text">
      {lyrics.lyrics.lyrics_body.replace(/(\r\n|\n|\r)/gm, "<br />")}
   </p>
</div>

这显然不会换行，只会直接将<br />渲染到段落中，这样不好

我对JSX还不太熟悉，不知道可以做什么和不能做什么，所以我有点迷失了。我尝试过使用/n或%0D%0A或其他我在研究中找到的任何东西，但都没有起作用。

我还尝试通过添加变量来进行连接，就像这样：

const newLine = <br />;

<div className="card-body">
   <p className="card-text">
      {lyrics.lyrics.lyrics_body.replace(/(\r\n|\n|\r)/gm, `${newLine})}
   </p>
</div>

但是它只会呈现为这样：

他们说“哦，我的天啊，我看到你闪耀的方式”[对象 对象]握住你的手，亲爱的

简而言之： 如何在任何出现 ↵ 的地方插入换行符？如果没有JSX表达式，我就可以完成它了。

我觉得我需要学习更多关于JSX的知识。

- scorpio

---

可能重复：https://dev59.com/A14c5IYBdhLWcg3wa56M#27958683 - Nikos M.

Answer 1

您可以通过CSS避免这整个烦恼：

.card-text {
    white-space: pre-line;
}

这将导致文本在换行时自动换行（以及必要时）。

只需按原样呈现lyrics_body：

<p className="card-text">
    {lyrics.lyrics.lyrics_body}
</p>

- Tarnay Kálmán

---

太棒了！谢谢Tarnay！ - max3d

哇！这就像魔法一样好用。谢谢。最佳解决方案。 - Gabriel Geelario

Answer 2

也许将字符串分割并映射它是一个好主意？

lyrics.lyrics.lyrics_body.split(/\r\n|\n|\r/gm).map(line => {
    return <React.Fragment>{line}<br /></React.Fragment>
})

- forkerino

---

这将从API接收到的字符串拆分，并映射到子字符串数组上，然后在末尾返回带有<br/>的字符串。它运行得很好，但呈现出的空格太多了，不过我认为这是最好的工作方式了。说实话，我不知道为什么没有想到这个方法，谢谢。 - scorpio

Answer 3

如果你按换行符拆分，然后通过 p 元素映射每行，可能更符合惯用语。

const lines = lyrics.split(/(\r\n|\n|\r/)

{lines.map(line => <p>{line}</p>)}

- Brennan Cheung

Answer 4

使用 "dangerouslySetInnerHTML" 渲染 <br/>

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。通常情况下，从代码中设置 HTML 是有风险的，因为很容易无意中让用户暴露于跨站脚本攻击 (XSS)。因此，你可以直接从 React 设置 HTML，但你必须手动输入 dangerouslySetInnerHTML 并传递一个带有 __html 键的对象，以提醒自己这是危险的。例如：

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

参考资料：https://reactjs.org/docs/dom-elements.html

- user54987

---

我在研究我的问题时看到过这种方法，但由于其风险性，我宁愿避免使用它。虽然这只是为了我的作品集，我不认为会有很多用户，但我现在宁愿不依赖它，也不想以后再试图摆脱依赖。谢谢。 - scorpio

Answer 5

声望太低，无法点赞或评论，但Tarnay Kálmán的答案对我非常有用。使用CSS可以避免重新格式化字符串的麻烦。将带有“white-space: pre-line”的CSS类添加到包含要呈现换行符文本的DOM元素中：

CSS：

.card-text {
    white-space: pre-line;
}

HTML：

<p className="card-text">
    {lyrics.lyrics.lyrics_body}
</p>

- Dan Peters