有没有办法在不使用 dangerouslySetInnerHTML 的情况下在文本中换行？

Question

我需要将 \n 替换为 <br>。但它把这个当作文本。

如何不使用 dangerouslySetInnerHTML 来做到这一点？

Answer 1

var yourNewValueWithBr = yourOldValue.replace(/\n/g,"<br />");

替换此文本后，您需要使用 dangerouslySetInnerHTML 将其呈现为 HTML。

Answer 2

此解决方案将 \n 替换为 <br>，并且在没有 dangerouslySetInnerHTML 的情况下工作：

render: function() {
  var lines = this.props.text.split("\n").map(function(line, n){
      return (n == 0) ? [line] : [<br />, line];
  });
  return <div>{lines}</div>;
}

但是，如果您需要 HTML 格式，并且 您确定您的文本不会受到 XSS 攻击，我建议您坚持使用 dangerouslySetInnerHTML和正则表达式替换，就像 Chris Hawkes 说的那样。

Answer 3

像往常一样插入文本，fix the line breaks with CSS:

white-space: pre-wrap;

不要使用dangerouslySetInnerHTML除非你真的不得不使用。

Answer 4

您可以使用 style={{whiteSpace: 'pre-wrap'}} 来包装 div。

现在你将在没有 dangerouslySetInnerHTML 和 <BR>

的情况下换行

您可以在此处检查浏览器兼容性：CSS SPEC

有没有办法在不使用 dangerouslySetInnerHTML 的情况下在文本中换行？

Is there a way to have line breaks in text without using dangerouslySetInnerHTML?

reactjs

line-breaks