React中如何给useState存储的字符串添加换行并正确渲染

根本原因 #

• 你代码里的换行符写法错误，JS 中的转义换行符是反斜杠开头的\n，你写的/n只会被识别为普通字符，无法触发换行
• HTML 默认不会把字符串中的\n解析为换行，所有连续的空白字符（空格、换行、制表符）都会被合并为单个空格显示

三种常用实现方案 #

方案1：使用CSS white-space属性（最推荐） #

给渲染文本的容器添加white-space样式即可，无需修改原有字符串处理逻辑：

const [simulationResult, setSimulationResult] = useState("");

// 修正为正确的换行符
let simulationFormatedString = "one \n two";
setSimulationResult(simulationFormatedString);

<div style={{ whiteSpace: 'pre-wrap' }}>
  {simulationResult}
</div>

属性说明：

• white-space: pre-wrap：保留所有空白字符（空格、换行、制表符），内容超出容器宽度时自动换行
• white-space: pre-line：仅保留换行符，多个连续空格会合并为单个，超出自动换行，可根据需求选择

方案2：字符串拆分插入<br>标签 #

将字符串按\n切割为数组，遍历渲染时手动插入换行标签：

const [simulationResult, setSimulationResult] = useState("");

let simulationFormatedString = "one \n two";
setSimulationResult(simulationFormatedString);

<div>
  {simulationResult.split('\n').map((line, idx) => (
    <React.Fragment key={idx}>
      {line}
      <br />
    </React.Fragment>
  ))}
</div>

注意：如果是动态可变内容，建议替换key为每行的唯一标识，避免索引作为key带来的渲染问题

方案3：使用pre标签包裹 #

HTML的<pre>标签默认保留空白与换行，直接包裹文本即可，缺点是默认会使用等宽字体，可通过CSS覆盖字体样式：

<div>
  <pre style={{ fontFamily: 'inherit' }}>{simulationResult}</pre>
</div>

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