如何将 /n 替换为 react.js 中的换行符？

Question

我想，以取代每/n一个<br>的标签ReactJS。在我的note.note对象中有一个带有多个的字符串/n。

示例note.note： test\ntest\ntest

我尝试过的ReactJS：

{
  note.note.split('\n').map(function( item, idx) {
    return (
        <span key={idx}>
          {item}
          <br/>
        </span>
    )
  })
}

Answer 1

另一种方法是使用 css 以换行符显示它。这也使复制和粘贴原始换行符以及区分一个中断 ( \n) 和两个中断 ( \n\n)变得更容易。

只需将样式添加white-space: pre-wrap;到您的元素中即可。

<div style={{whiteSpace: "pre-wrap"}}>{note.note}</div>

如果这不能完全满足您的要求，还有其他空白选项：https : //developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 2

您的代码运行良好：

{
    note.note.split("\n").map(function(item, idx) {
        return (
            <span key={idx}>
                {item}
                <br/>
            </span>
         )
    })
}

笔记：

OP 问题在于后端返回\\n并显示\n在XHR preview选项卡中

Answer 3

我只是想分享这个我已经使用了一段时间的功能。它与 Jim Peeters 的答案类似，但没有生成父标签，只是将\n转向<br key="<index here>" />。

import React from 'react'

export const escapedNewLineToLineBreakTag = (string) => {
  return string.split('\n').map((item, index) => {
    return (index === 0) ? item : [<br key={index} />, item]
  })
}

您还可以通过省略 和 大括号将其转换为较长的一行return。

export const escapedNewLineToLineBreakTag = (string) => string.split('\n').map((item, index) => (index === 0) ? item : [<br key={index} />, item])

免责声明：背后的逻辑不是来自我，但我不记得在哪里找到它。我只是把它变成了函数形式。