所以我正在制作一个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
最佳答案
也许将字符串拆分并映射在它上面是个好主意吗?
lyrics.lyrics.lyrics_body.split(/\r\n|\n|\r/gm).map(line => {
return <React.Fragment>{line}<br /></React.Fragment>
})
关于javascript - 在JSX表达式中动态添加换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59546760/