在react中的字符串文字中插入新行

Question

我在获取字符串文字的一部分以换行时遇到麻烦。我想在一行上显示文本“ Development＆”，然后在下一行上显示文本“ Production”。我已经尝试过\ n \ r和一些Unicode组合，但是还没有成功……有什么想法吗？

<Collapsible trigger="Development &amp; Production">
  <SomeOtherComponent />
</Collapsible>

Answer 1

这里的问题是HTML不在乎您的\n和\r。您需要对此进行分解，并使用带有换行符的HTML标记。

我不确定trigger道具是否还会允许您传递ReactElement，如果是这样，您会做类似的事情：

trigger={<><div>Development &amp;</div><div>Production</div></>}

您也可以使用<br />标签创建换行符。