React/Material UI：如何尊重字符串中的空格？

Question

尝试使用 Material UI 中的排版 (https://material-ui.com/api/typography/)

我们的目标是在保存的字符串中保留新的行和空格。

这样一个具有前导空格和换行符的示例将呈现为：

const svg = d3.select("#chart-area")
   .append("svg")  
   .attr("width", 400)
   .attr("height", 400)

如果我只使用<Typography>{val}</Typography>，那么值会在一行中呈现，例如：

const svg = d3.select("#chart-area") .append("svg") .attr("width", 400) .attr("height", 400)

添加 {{ whiteSpace: 'pre-line' }} 使 Typography 至少尊重新行：

<Typography style={{ whiteSpace: 'pre-line' }}>{val}</Typography>

将字符串渲染为

const svg = d3.select("#chart-area")
.append("svg")
.attr("width", 400)
.attr("height", 400)

但是我们如何让组件尊重新行和前导空格？

Answer 1

您可以使用preformatted text element 代替<Typography />

<pre>
  const svg = d3.select("#chart-area")
.append("svg")
.attr("width", 400)
.attr("height", 400)
</pre>