有没有一种方法可以在不使用危险的SetInnerHTML的情况下在文本中换行

我需要将n替换为<br>。但它将此视为文本。

在不使用dangerouslySetInnerHTML的情况下如何做到这一点？

像往常一样插入文本，并使用CSS:修复换行符

white-space: pre-wrap;

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

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

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

此解决方案将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所说的那样。

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

现在您将在没有dangerouslySetInnerHTML和<BR> 的情况下断线

您可以在这里检查浏览器兼容性：CSS SPEC

相关内容

最新更新

热门标签：