我正在制作一个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的知识。