jsx表忽略换行符

Question

我正在尝试使用多行字符串创建一个表，但我的表格未正确格式化该字符串。这是jsx：

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

这是相应的html：

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

但在浏览器中它看起来像：

发生了什么以及如何让新线出现？

Answer 1

以您的单元格样式尝试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>

Answer 2

你有几个选择：

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 /黑客攻击的威胁，你可以使用dangerouslySetInnerHTML为每一行添加'br'：

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，但代价是网页/用户的安全性具有潜在风险。如果其他人为你工作，我不会使用这个。

Answer 3

如果确实需要，请在JSX中使用{'\n'}。

Answer 4

尝试使用<pre>元素或css属性white-space: pre-wrap;

Answer 5

这是一个HTML内容，其中换行符与空格相同。 要强制换行，请使用<br/>等{arr.join('<br/>')}标记。

Answer 6

这里是关于如何通过在每个新单词后呈现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/>, ...]

为简单起见，我不会在每个元素上添加键，也不会删除最后一个元素。但是，如果需要，可以很容易地自己做。