如何在React上使用样式whiteSpace:’pre-wrap’
我有一个div,需要使用带空格的格式来呈现文本
render() { <div style={{whiteSpace: 'pre-wrap'}} keep formatting keep spaces </div> }
JSX折叠空格,在这种情况下,您可以dangerouslySetInnerHTML像这样使用
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>