从保存的文本区域中响应显示换行符

没有理由使用JS。您可以使用空格 CSS 属性轻松告诉浏览器如何处理换行符：

white-space: pre-line;

前期生产线

空格序列已折叠。换行符、处 处和填充换行框时将根据需要换行。<br>

看看这个演示：

<style>
  #p_wrap {
    white-space: pre-line;
  }
</style>

<textarea id="textarea"></textarea>
<p id="p_standard"></p>
<hr>
<p id="p_wrap"></p>
<script>
  textarea.addEventListener('keypress', function(e) {
    p_standard.textContent = e.target.value
    p_wrap.textContent = e.target.value
  })
</script>

这是预料之中的，您需要将新行 （\n） 字符转换为 HTML 换行符

一篇关于在 react 中使用它的文章：React Newline to break （nl2br）

引用文章：

因为你知道 React 中的所有内容都是函数，所以你真的不能这样做

this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />')

由于这将返回一个包含DOM节点的字符串，因此也不允许这样做，因为必须只是一个字符串。

然后，您可以尝试执行如下操作：

{this.props.section.text.split(“\n”).map(function(item) {
  return (
    {item}
    <br/>
  )
})}    

这也是不允许的，因为 React 是纯函数，两个函数可以彼此相邻。

tldr.溶液

{this.props.section.text.split(“\n”).map(function(item) {
  return (
    <span>
      {item}
      <br/>
    </span>
  )
})}

现在，我们将每个换行符包装在一个跨度中，这工作正常，因为 span 具有内联显示。现在我们得到了一个有效的 nl2br 换行解决方案