React.js中如何渲染带换行与空格的JSX文本？

方案1：使用<pre>标签 #

<pre>是HTML原生预格式化标签，会完整保留文本中的换行、空格和缩进，和控制台显示效果完全匹配，直接包裹目标文本即可：

<div>
  <h5>Prompt:</h5>
  {answer[0]}
  <br />
  <h5>Generated Output:</h5>
  <pre>{answer[1]}</pre>
</div>

方案2：通过CSS样式实现 #

如果需要自定义文本样式（比如字体、行高），可以给容器添加white-space: pre-wrap属性，该属性会保留换行和空格，同时支持文本自动换行适应容器宽度：

内联样式写法 #

<div>
  <h5>Prompt:</h5>
  {answer[0]}
  <br />
  <h5>Generated Output:</h5>
  <div style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>{answer[1]}</div>
</div>

类样式写法（更易复用） #

先定义CSS类：

.formatted-code {
  white-space: pre-wrap;
  font-family: monospace; /* 可选：模拟控制台等宽字体 */
  /* 可添加其他样式：比如行高、内边距等 */
}

再在组件中使用：

<div>
  <h5>Prompt:</h5>
  {answer[0]}
  <br />
  <h5>Generated Output:</h5>
  <div className="formatted-code">{answer[1]}</div>
</div>

以上两种方案都无需修改原始字符串，也不需要使用DangerouslySetInnerHTML，就能实现类似控制台的格式化渲染效果。

内容的提问来源于stack exchange，提问作者cooldudejs