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>

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

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

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

CodePen 上的示例。

在我们的例子中，我们也尝试使用whiteSpace，发现没有一个选项完全符合我们的要求。