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

Posted 2023-02-21

【中文标题】如何使用空格：React 上的“预包装”

【英文标题】：How to use whiteSpace: 'pre-wrap' on React

【发布时间】：2016-07-22 12:03:30

【问题描述】：

如何在 React 上使用样式 whiteSpace: 'pre-wrap'

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

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

      keep spaces
   </div>

【参考方案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>

【讨论】：

这似乎不再是这种情况。我能够只添加 CSS 属性并且它有效。不需要dangerouslySetInnerHTML。

@inostiam 谢谢，添加了注释。

+100 惊呆了...这个答案值得比目前得到的更多赞誉..

【参考方案2】：

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

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

你可以把它做成一个函数或一个组件，比如<MultilineText text=text/>。

Example on CodePen.

在我们的例子中，我们还尝试使用whiteSpace，发现没有一个选项能完全满足我们的需求。