React中无法将展示数据设置为等宽样式的技术求助

我明白你遇到的困扰了——明明用了Courier New这类等宽字体，但那些带竖线、对齐空格的文本就是没法按预期排版，核心问题在于HTML默认会合并空白字符（连续空格、换行符都会被压缩成单个空格），哪怕用了等宽字体也没法发挥作用。下面给你几个实用的解决方案：

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

<pre>标签天生就是用来展示预格式化文本的，它会完整保留原始内容的空格、换行和缩进，完美适配你这种需要严格排版的场景。修改你的代码如下：

<div style={{fontSize:"11px", fontFamily:"Courier New, monospace"}}>
  {this.state.codeData.map((item, index) => 
    <pre key={index} style={{margin: 0}}>{item}</pre>
  )}
</div>

• 把<p>换成<pre>，确保空白字符不被浏览器合并
• 给<pre>加margin:0，去掉标签默认的上下边距，让排版更紧凑
• 替换Math.random()为数组索引index作为key（随机key会导致组件频繁重渲染，不推荐使用）

方案2：用CSS的white-space属性控制空白处理 #

如果你不想替换标签，也可以给普通<p>标签添加white-space样式，强制浏览器保留空白和换行：

<div style={{fontSize:"11px", fontFamily:"Courier New, monospace"}}>
  {this.state.codeData.map((item, index) => 
    <p 
      key={index} 
      style={{whiteSpace: 'pre-wrap', margin: 0}}
    >
      {item}
    </p>
  )}
</div>

• white-space: pre-wrap：既保留空格和换行，又允许文本过长时自动换行
• 如果不需要自动换行，可以用white-space: pre，效果和<pre>标签一致

额外小提示 #

• 字体设置里加上monospace作为备选，确保在没有Courier New的系统上也能显示等宽字体
• 尽量避免用Math.random()作为组件key，这会让React无法正确复用组件，影响性能；优先用数组索引（如果数据不会重新排序）或者每个item的唯一标识

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