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

Question

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

\n\n

API 给了我一个歌词主体，它是一个字符串，我用它来在页面上显示歌词，问题是，当 React 渲染它时，看起来不是特别好，因为 api 给了我这个：

\n\n

They say "Oh my god I see the way you shine"\xe2\x86\xb5Take your hand, my dear（这是API返回给我的部分歌词数据）

\n\n

正是这个字符：\xe2\x86\xb5造成了问题，他们很高兴为我提供任何应该是换行符的东西。所以我决定用一个替换那个角色<br />

\n\n

这是我的一段代码：

\n\n

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

\n\n

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

\n\n

我对 JSX 以及你能做什么和不能做什么所以我有点迷失在这里，我尝试过/n或%0D%0A我在研究过程中发现的任何其他东西但没有任何效果

\n\n

我还尝试通过添加这样的变量来连接：

\n\n

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

\n\n

但这只是渲染成这样：

\n\n

They say "Oh my god I see the way you shine"[object Object]Take your hand, my dear

\n\n

TLDR:\n如何在有 \xe2\x86\xb5 的地方插入换行符？如果没有 JSX 表达式，我就完蛋了。

\n\n

我想我需要更多地了解 JSX

\n

Answer 1

你可以用 CSS 避免这整个考验：

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

这将导致文本在换行符处换行（并且在必要时）。

只需按原样渲染歌词正文：

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

Answer 2

也许分割字符串并映射它是一个想法？

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