如何使用空格：React 上的“预包装”答案

【问题标题】：How to use whiteSpace: 'pre-wrap' on React如何使用空格：React 上的“预包装”
【发布时间】：2016-07-22 12:03:30
【问题描述】：

如何在 React 上使用样式 whiteSpace: 'pre-wrap'

我有一个 div 需要使用带空格的格式来呈现文本

render() {
   <div style={{whiteSpace: 'pre-wrap'}}
      keep formatting

      keep spaces
   </div>
}

【问题讨论】：

标签： css reactjs whitespace react-jsx jsx

【解决方案1】：

JSX 折叠空格，在这种情况下你可以像这样使用dangerouslySetInnerHTML

var Component = React.createClass({
  content() {
    const text = `
      keep formatting

      keep spaces
   `;

    return { __html: text };
  },

  render: function() {
    return <div 
      style={{ whiteSpace: 'pre-wrap' }} 
      dangerouslySetInnerHTML={ this.content() } 
    />
  }
});

注意：对于新版本的React/JSX，不需要使用dangerouslySetInnerHTML

const App = () => (
  <div style={{ whiteSpace: 'pre-wrap' }}>
    {`
      keep formatting

      keep spaces


      keep spaces
   `}
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

这似乎不再是这种情况。我能够只添加 CSS 属性并且它有效。不需要dangerouslySetInnerHTML。
@inostiam 谢谢，添加了注释。
+100 惊呆了...这个答案值得比目前得到的更多赞誉..

【解决方案2】：

您可以使用dangerouslySetInnerHTML，但这很危险。 :) 您还可以做什么，也就是我们在应用程序中所做的，就是将字符串转换为 React 元素，例如渲染换行符：

text.split("\n").map((text, i) => i ? [<br/>, text] : text)

你可以把它做成一个函数或一个组件，比如<MultilineText text={text}/>。

Example on CodePen.

在我们的例子中，我们还尝试使用whiteSpace，发现没有一个选项能完全满足我们的需求。

【讨论】：