Ant design Card组件传入内容时如何保持段落的缩进？

Question

如上图所示，我有一段yaml格式的数据，想要在Card中按照这种格式显示。但是直接放入Card组件中，缩进和换行全部不见了，数据全部挤成一堆了，如下图所示：

<Card>
   {transYML}
</Card>

请问这个问题如何解决呢？

Answer 1

试试模板字符串

Answer 2

JSON.stringify的第三个参数也有美化输出的作用。JSON.stringify

通用的用法是JSON.stringify(data, undefined, 2); + pre

<pre>
 { JSON.stringify(data, undefined, 2) }
</pre>