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

Question

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

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(/(rn|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(/(rn|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

你可以用CSS避免这整个磨难：

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

这将导致文本换行(以及在必要时(。

只需按原样呈现lyrics_body：

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

Answer 2

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

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

Answer 3

如果您在换行符上拆分，然后使用p元素映射这些行，可能会更惯用。

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

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

Answer 4

使用 "dangerouslySetInnerHTML" 来渲染<br/>

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

function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}

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

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>