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

另一种方法：

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

Answer 4

我只想分享我已经使用了一段时间的功能。它类似于Jim Peeters的答案，但没有生成父标记，只是将c更改为quill.scroll.length()。

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

免责声明：背后的逻辑并非来自我，但我不记得在哪里找到它。我只是将其转换为函数形式。

Answer 5

React较新版本的一点更新

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

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

5 个答案: