javascript - 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>