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

【问题标题】：Adding a line break dynamically inside a JSX expression在 JSX 表达式中动态添加换行符
【发布时间】：2020-04-20 03:21:24
【问题描述】：

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

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

They say "Oh my god I see the way you shine"↵Take your hand, my dear(这是API返回给我的部分歌词数据)

是这个角色：↵ 造成了问题，他们很高兴给我任何应该是换行符的东西。所以我决定用 替换那个字符

这是我的一段代码：

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

这显然不会换行，但它只会将  直接呈现到段落中，这不好

我对 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

【问题讨论】：

可能重复：stackoverflow.com/a/27958683/3591273

标签： javascript html reactjs jsx

【解决方案1】：

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

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

【讨论】：

这会拆分从 API 接收到的字符串并映射到子字符串数组，然后以
结尾返回它。它工作得很好，但仍然看起来有多少空白空间被渲染，但我认为这是我能得到的最好的，我必须使用老实说。不知道为什么我没有想到这一点，谢谢。

【解决方案2】：

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

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

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

按原样渲染歌词正文：

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

【讨论】：

绝妙的答案！谢谢塔内！
哇！这就像魔术一样。谢谢。最佳解决方案

【解决方案3】：

使用“dangerouslySetInnerHTML”渲染 

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

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

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

【讨论】：

我在研究我的问题时看到了这一点，但我宁愿避免使用它，因为它有多大风险。我怀疑我会得到很多用户，因为这是我的投资组合，但我宁愿现在不依赖它，也不愿以后试图摆脱我的依赖。不过谢谢。

【解决方案4】：

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

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

{lines.map(line => {line})}

【讨论】：