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

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 又是纯函数，两个函数可以相邻。

域名解决方案

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

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

Answer 3

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

white-space: pre-line;

Answer 4

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

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

它使用 React 16 的Fragments

Answer 5

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

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

Answer 6

从 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 7

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

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