如何使用whiteSpace：React上的“预包装”

Question

如何在React上使用样式whiteSpace：’pre-wrap’

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

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

      keep spaces
   </div>
}

Answer 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>