reactjs - 如何在 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

您也可以考虑预包装。更多信息请参见此处 ( CSS white-space Property )。