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

Question

我正在尝试将ReactJS中的每个/n替换为<br>标签。 在我的note.note对象中有一个包含多个/n的字符串。

示例note.note：test\ntest\ntest

我在ReactJS中尝试过的方法：

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

- Jim Peeters

---

你能澄清一下“无法工作”的含义吗？看起来你的逻辑很正确：https://jsfiddle.net/sn2qkgzs/1/ - CodingIntrigue

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

- Tom Prats

---

更好的做法是，已经有 CSS 解决方案可以实现这一点，构建大量 DOM 元素来呈现文本字符串是不必要的。个人认为这样做过度了。 - nevelis

有时候你想要分割文本以创建类似于项目符号的东西，但对于那些输出通过 textarea 表单输入的文本的情况，这种方法是简单、可重复且非常高效的。很高兴我首先阅读了一些评论，因为我差点就跳进了 split 解决方案里 - 谢谢。 - Jarrod McGuire

绝对是最佳答案。 - 55 Cancri

Answer 2

你的代码很好：

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

问题出在后台返回的\\n在XHR预览选项卡中显示为\n

- tomloprod

---

是的，替换似乎比分割和重新组装更容易/更清洁。 - Jayce444

@Jayce444 这是JavaScript中常用的全局替换方式s.split("\n").join("<br/>")的示例。 - Reinstate Monica Cellio

这里我的方法有什么不同？我看到的唯一不同的是在 note.note 后面加了 .text。 - Jim Peeters

嗯，有趣。好知道！ - Jayce444

你的解决方案有效。问题出在我身上，因为它从我的后端返回的是'//n' ，但在我的XHR预览选项卡中显示为'/n'。 - Jim Peeters

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])

免责声明：这个逻辑不是我想出来的，但我记不清在哪里找到它了。我只是将它转化为函数形式。

- jp06

Answer 4

React新版本的一些更新

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

- Eliecer Chicott

Answer 5

另一种方法：

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

- Jim Peeters