Question

我需要将\n替换为<br>。但它正如文本中那样。

如何在不使用dangerouslySetInnerHTML的情况下执行此操作？

Answer 1

像往常一样插入文字，并fix the line breaks with CSS：

white-space: pre-wrap;

不要使用dangerouslySetInnerHTML，除非真的必须这样做。

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和像克里斯霍克斯这样的正则表达式取代。

Answer 3

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

现在，您将在没有dangerouslySetInnerHTML和<BR>的情况下换行

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

Answer 4

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

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

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

4 个答案: