React+Nodejs考试平台样例输入输出换行无法正常渲染如何解决

HTML默认渲染规则会将文本字符串中的\n换行符识别为普通空白字符，不会自动转换为页面可见的换行效果。无论后端是否正确存储了带换行的内容，只要前端直接将原始字符串放入普通DOM节点渲染，就会出现换行丢失的问题，该问题和Node.js后端存储逻辑无直接关联，核心是渲染规则不匹配。

前端React侧调整（优先选择，改造成本最低） #

• 方案1：通过CSS属性适配（推荐）
  给承载样例输入、样例输出内容的容器元素添加white-space: pre-wrap样式，该样式会完整保留文本内的换行符、连续空格，同时文本超出容器宽度时会自动折行，不会出现横向滚动条溢出，是适配样例、代码类文本展示的最优方案。参考实现：

  // 题目样例展示组件示例
  const SampleDisplay = ({ sampleInput, sampleOutput }) => {
    return (
      <div className="sample-section">
        <div className="sample-item">
          <div className="sample-title">样例输入</div>
          {/* 内容容器添加换行保留样式 */}
          <div className="sample-content" style={{ whiteSpace: 'pre-wrap' }}>
            {sampleInput}
          </div>
        </div>
        <div className="sample-item">
          <div className="sample-title">样例输出</div>
          <div className="sample-content" style={{ whiteSpace: 'pre-wrap' }}>
            {sampleOutput}
          </div>
        </div>
      </div>
    )
  }
  

  如果需要保留样例的原始格式、不做自动折行，将样式值替换为white-space: pre即可，此时超出宽度的内容会通过横向滚动查看。
• 方案2：拆分字符串手动渲染换行
  如果不想调整CSS，可以在拿到内容字符串后，按换行符拆分文本，遍历渲染时逐行追加换行标签：

  const renderMultiLineText = (text) => {
    return text.split('\n').map((line, index) => (
      <Fragment key={index}>
        {line}
        <br />
      </Fragment>
    ))
  }
  

  注意该方案默认不会保留连续空格效果，如果需要还原文本缩进、空格排版，仍要配合上述CSS属性使用。
• 方案3：使用原生pre标签包裹
  原生<pre>标签默认自带white-space: pre的渲染规则，直接将内容放入pre标签内即可保留换行效果，使用时注意重置pre标签默认的等宽字体、内外边距样式，和站点整体UI风格保持统一。

后端Node侧兜底调整（可选） #

• 出题考官上传题目接口不需要额外转义换行符，只要保证入库存储时，原始提交内容中的\n没有被全局过滤、替换为空即可，可以在接口参数校验层增加判断，确认样例字段的换行符被正常保留。
• 针对上线前存量的、已经丢失换行符的历史题目数据，可以写一次性脚本修复，不需要调整现有的核心存储逻辑。

• 不要为了渲染换行使用dangerouslySetInnerHTML直接注入用户提交的内容，会引发XSS注入安全风险，上述三种前端方案均为安全的原生文本渲染方式。
• 如果考官上传的内容来自Windows系统，可能携带\r\n格式的换行符，不需要额外特殊处理，white-space系列属性可以正常识别；也可以在前端拿到内容后统一执行.replace(/\r\n/g, '\n')做格式标准化，避免不同操作系统上传的换行格式不统一。

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