如何在React中呈现多行文本字符串

Question

假设我有一个包含换行符的文本字符串,我将其渲染为:

render() {
    var text = "One\nTwo\nThree";
    return <div>{text}</div>;
}

在HTML中,换行符不会呈现为换行符.我应该如何在React中做到这一点？我不想转换为<br>标签和使用dangerouslySetInnerHTML.还有另外一种方法吗？

Answer 1

创建一个新的CSS类

.display-linebreak {
  white-space: pre-line;
}

使用该CSS类显示您的文本

render() {
  const text = 'One \n Two \n Three';
  return ( 
     <div className="display-linebreak"> 
        {text} 
     </div>
  );
}

使用换行符渲染(空格的序列将折叠为单个空格.文本将在必要时换行).像这样:

One
Two
Three

您也可以考虑预包装.更多信息请访问 http://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 2

你可以尝试为每一行添加div

render() {
    return (<div>
        <div>{"One"}</div>
        <div>{"Two"}</div>
        <div>{"Three"}</div>
    </div>);
}

要么

render() {
    var text = "One\nTwo\nThree";
    return (
    <div>
        {text.split("\n").map((i,key) => {
            return <div key={key}>{i}</div>;
        })}
    </div>);
}

Answer 3

您可以使用CSS属性"white-space:pre".我认为这是解决这个问题的最简单方法.

Answer 4

这是最干净的解决方案（afaik）：

   render(){
      return <pre>
             Line 1{"\n"}
             Line 2{"\n"}
             Line 3{"\n"}
      </pre>
   }

也可以使用<div style={{whiteSpace:"pre"}}>, 或任何其他 html 块元素（例如span或p使用此样式属性）代替您

Answer 5

试试这个，

render() {
    var text = "One\nTwo\nThree";
    return <div style={{whiteSpace: 'pre-line'}}>{text}</div>;
}