我如何在 React 上使用样式 whiteSpace: 'pre-wrap'
我有一个 div 需要使用带空格的格式呈现文本
render() {
<div style={{whiteSpace: 'pre-wrap'}}
keep formatting
keep spaces
</div>
}
最佳答案
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 - 如何使用空白 : 'pre-wrap' on React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36377373/