javascript - 在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>

但这只是这样渲染:
They say "Oh my god I see the way you shine"[object Object]Take your hand, my dear
TLDR:
如何在有↵的任何地方插入换行符？如果没有JSX表达式，我将用它完成。

我想我需要进一步了解JSX

Answer 1

也许将字符串拆分并映射在它上面是个好主意吗？

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