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

Question

使用 Facebook React。 在设置页面中，我有一个多行textarea，用户可以在其中输入多行文本（在我的例子中，是一个地址）。

<textarea value={address} />

当我尝试显示地址时，例如{address}，它不会显示换行符，而是全部在一行上。

<p>{address}</p>

任何想法如何解决这个问题？

Answer 1

没有理由使用 JS。您可以使用white-space 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>

Answer 2

这是意料之中的，您需要将换行符 (\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 中，这可以正常工作，因为 span 具有内联显示。现在我们得到了一个有效的 nl2br 换行解决方案

Answer 3

解决方案是在显示textarea内容的元素上设置属性white-space：

white-space: pre-line;

Answer 4

Pete 之前提出的带有独立组件的建议是一个很好的解决方案，尽管它遗漏了一件重要的事情。列出需求keys。我稍微调整了一下，我的版本（没有控制台警告）看起来像这样：

const NewLineToBr = ({ children = '' }) => children.split('\n')
  .reduce((arr, line, index) => arr.concat(
    <Fragment key={index}>
      {line}
      <br />
    </Fragment>,
  ), [])

它使用 React 16 的 Fragments

Answer 5

从 React 16 开始，组件可以返回元素数组，这意味着您可以像这样创建组件：

export default function NewLineToBr({children = ""}){
  return children.split('\n').reduce(function (arr,line) {
    return arr.concat(
      line,
      <br />
    );
  },[]);
}

你会这样使用：

<p>
  <NewLineToBr>{address}</NewLineToBr>
</p>

Answer 6

对上述答案的一个小补充： white-space 属性最好与word-wrap 一起使用，以防止溢出。

p {
  white-space: pre-wrap;
  word-wrap: break-word;   
}

Answer 7

爱网络版。我不知道 Fragment 组件，它非常有用。不过不需要使用reduce方法。 地图就够了。此外， list 确实需要 react 中的键，但是使用迭代方法中的 index 是一个坏习惯。 eslint 一直在我的警告中打破这一点，直到我遇到混淆错误。 所以它看起来像这样：

const NewLine = ({ children }) =>
   children.split("\n").map(line => (
    <Fragment key={uuidv4()}>
      {line}
      <br />
    </Fragment>
  ));