web-dev-qa-db-ja.com

whiteSpaceの使用方法： 'pre-wrap' on React

ReactでスタイルwhiteSpace： 'pre-wrap'を使用するにはどうすればよいですか？

スペースを含む形式を使用してテキストをレンダリングする必要があるdivがあります

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

      keep spaces
   </div>
}
cssreactjswhitespacereact-jsxjsx
12
Sibelius Seraphini

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>
12
Alexander T.

dangerouslySetInnerHTMLを使用できますが、これは危険です。 :)他にできること、つまりアプリで行うことは、文字列をReact要素に変換して、たとえば改行をレンダリングすることです。

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

これを<MultilineText text={text}/>のような関数またはコンポーネントにすることができます。

CodePenの例 。

私たちの場合、whiteSpaceも使用してみましたが、どのオプションも私たちが望むものを完全に提供していないことがわかりました。

0
Aaron Beall