jsx 忽略换行符 table

Question

我正在尝试创建一个包含多行字符串的 table，但我的 table 未正确设置该字符串的格式。这是 jsx:

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

这里是对应的html:

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

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

发生了什么事以及如何让我的换行符出现？

Answer 1

您有几个选择：

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/hacks 的威胁，您可以使用 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 数量最少，但代价是可能危及网络安全 page/user。如果其他人为你工作，我不会使用这个。

Answer 2

当你真的需要它时，在你的 JSX 中使用 {'\n'}。

Answer 3

尝试 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 4

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

jsx 忽略换行符 table

newlines character ignored by jsx table

javascript

reactjs

react-jsx