有没有办法在不使用 dangerouslySetInnerHTML 的情况下在文本中换行?
Is there a way to have line breaks in text without using dangerouslySetInnerHTML?
我需要将 \n
替换为 <br>
。但它把这个当作文本。
如何不使用 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 说的那样。
像往常一样插入文本,fix the line breaks with CSS:
white-space: pre-wrap;
不要使用dangerouslySetInnerHTML
除非你真的不得不使用。
您可以使用 style={{whiteSpace: 'pre-wrap'}}
来包装 div。
现在你将在没有 dangerouslySetInnerHTML
和 <BR>
的情况下换行
您可以在此处检查浏览器兼容性:CSS SPEC
我需要将 \n
替换为 <br>
。但它把这个当作文本。
如何不使用 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 说的那样。
像往常一样插入文本,fix the line breaks with CSS:
white-space: pre-wrap;
不要使用dangerouslySetInnerHTML
除非你真的不得不使用。
您可以使用 style={{whiteSpace: 'pre-wrap'}}
来包装 div。
现在你将在没有 dangerouslySetInnerHTML
和 <BR>
您可以在此处检查浏览器兼容性:CSS SPEC