web-dev-qa-db-ja.com

jsxテーブルによって無視される改行文字

複数行の文字列でテーブルを作成しようとしていますが、文字列はテーブルで正しくフォーマットされていません。 jsxは次のとおりです。

<td>
  {arr.join('\n')}
</td>

対応するhtmlは次のとおりです。

<td data-reactid=".xyz">Line 1
Line 2
Line 3
Line 4</td>

ただし、ブラウザでは次のようになります。

enter image description here

何が起こっているのか、どのようにして改行を表示させるのですか？

javascriptreactjsreact-jsx
16
Eric Baldwin

いくつかのオプションがあります：

1）divやpなどのブロックレベル要素を使用して、各行をラップします。

var TextLines = React.createClass({      
    render: function() {
        var lines = this.props.lines;

        var formatted = lines.map(function(line) {
            return (<p>{line}</p>);
        });
        return (<div>{ formatted }</div>);
    }
});

var lines = ['line 1', 'line 2', 'line 3'];
React.render(<TextLines lines={ lines }/>, 
              document.getElementById('container'));

2）br要素でスパンを使用します：

var TextLines = React.createClass({      
    render: function() {
        var lines = this.props.lines;

        var br = lines.map(function(line) {
            return (<span>{line}<br/></span>);
        });
        return (<div>{ br }</div>);
    }
});

var lines = ['line 1', 'line 2', 'line 3'];
React.render(<TextLines lines={ lines } />,  
              document.getElementById('container'));

3）データにXSS /ハッキングの脅威がないことが確実な場合は、各行に「br」を付けて dangerouslySetInnerHTML を使用できます。

var TextLines = React.createClass({      
    render: function() {
        var lines = this.props.lines;
        var content = {
            __html: lines.join('<br />')
        };     
        return (<div dangerouslySetInnerHTML={ content } />);
    }
});

var lines = ['line 1', 'line 2', 'line 3'];
React.render(<TextLines lines={ lines } />, 
             document.getElementById('container'));

最後のものは最小限のHTMLを生成しますが、Webページ/ユーザーのセキュリティを潜在的に危険にさらします。他の人があなたのために働くなら、私はこれを使いません。

17
WiredPrairie

white-space: pre;またはwhite-space: pre-wrap;（ありがとう、Mirage）セルのスタイルで。

td {
  width: 150px;
}

.nopre {
  background-color: lightblue;
}

.withpre {
  background-color: lightgreen;
  white-space: pre;
}

.withprewrap {
  background-color: orange;
  white-space: pre-wrap;
}
<table><tr>

<td class="nopre">Line A
Line B
Line C
This is a cell with no whitespace setting</td>

</tr></table><table><tr>

<td class="withpre">Line 1
Line 2
Line 3
This is a cell with white-space: pre</td>

</tr></table><table><tr>
  
<td class="withprewrap">Line 1
Line 2
Line 3
This is a cell with white-space: pre-wrap</td>
  
</tr></table>
18
Chris

これが本当に必要なときは、{'\n'} JSX内。

12
dontmentionthebackup

<pre>要素またはcssプロパティwhite-space: pre-wrap;を使用してみてください

2
klioen

新しいWordごとにJSXで単一の「br」要素をレンダリングすることで、「\ n」を置き換える方法のアイデアを次に示します。

{['orange', 'Apple', 'limon']
  .reduce((acc, w) => acc.concat(acc.length % 2 !== 0 ? w : [w, '\n']), [])
  .map(w => w === '\n' ? <br/> : w)}  // => [orange, <br/>, Apple, <br/>, ...]

簡単にするために、各要素にキーを追加せず、最後のを削除しません。ただし、必要な場合は自分で簡単に実行できます。

0
Purkhalo Alex

これは、改行がスペースと同じものであるHTMLのものです。強制的に改行するには、{arr.join('<br/>')}のような<br/>タグを使用します。

0
flaviodesousa