Wie whitespace verwenden: ‚pre-wrap‘ auf React

Question

Wie ich den Stil whitespace verwenden kann: ‚pre-wrap‘ auf React

Ich habe ein div, die den Text mit dem Format mit Leerzeichen zu machen brauchen

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

     keep spaces 
    </div> 
} 

Answer 1

JSX Whitespaces zusammenbricht, in diesem Fall, dass Sie dangerouslySetInnerHTML wie so

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() } 
    /> 
    } 
}); 

verwenden können Hinweis: Für neue Versionen von React/JSX, gibt es keine Notwendigkeit 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>

Answer 2

Sie dangerouslySetInnerHTML verwenden können, verwenden, aber das ist, na ja, gefährlich. :) Was kann man tun, das ist, was wir in unserer App zu tun, ist die Zeichenfolge konvertieren Elemente zu reagieren, beispielsweise Zeilenumbrüche zu machen:

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

Sie können diese in eine Funktion machen oder eine Komponente wie <MultilineText text={text}/>.

Example on CodePen.

In unserem Fall haben wir auch versucht whiteSpace zu verwenden und festgestellt, dass keine der Optionen uns recht gab, was wir wollten.