我来帮你搞定这个换行的困扰！你遇到的情况是React渲染文本时的默认行为导致的：HTML里的<p>元素不会把\n识别为换行，而<br>会被转义成纯文本显示，不会变成真正的换行标签。下面给你几个靠谱的解决方案：

方案1：用CSS让\n生效 #

这个方法最简单，不需要修改你的本地化文本内容，只需要给<p>标签加个CSS样式，让它识别换行符：

.App p {
  white-space: pre-line;
}

pre-line的作用是保留换行符，同时自动合并多余的空格，完美适配你的场景。修改后，你原来文本里的\n就能正常显示成换行了。

方案2：处理<br>标签为真实HTML元素 #

如果你想用<br>来控制换行（比如你的本地化文本里已经写了<br>，也就是转义后的<br>），可以用两种方式处理：

安全拆分法（推荐，无XSS风险） #

把文本按<br>拆分，然后逐个渲染，中间插入<br>标签：

import * as React from "react";
import { render } from "react-dom";

const App: React.FC = props => {
  const Translations: { [key: string]: { fname: string; }; } = {
    en: {
      fname: "I want to insert a break in this line of text so it shows on two lines \n doesnt work and <br> does either",
    },
    cn: {
      fname: "我想在这一行文本中插入一个中断，以便在两行中显示\n不起作用，而<br>可以",
    }
  };
  const txt = Translations["en"];
  // 把文本按<br>拆分
  const textParts = txt.fname.split("<br>");
  
  return (
    <div className="App">
      <p>
        {textParts.map((part, index) => (
          <React.Fragment key={index}>
            {/* 渲染每个文本片段 */}
            {part}
            {/* 不是最后一段的话，插入<br> */}
            {index !== textParts.length - 1 && <br />}
          </React.Fragment>
        ))}
      </p>
    </div>
  );
};

const rootElement = document.getElementById("root");
render(<App />, rootElement);

直接渲染HTML（仅适用于可信文本） #

如果你的本地化文本是完全可控的（没有用户输入内容），可以用dangerouslySetInnerHTML直接把文本转换成HTML渲染：

import * as React from "react";
import { render } from "react-dom";

const App: React.FC = props => {
  const Translations: { [key: string]: { fname: string; }; } = {
    en: {
      fname: "I want to insert a break in this line of text so it shows on two lines \n doesnt work and <br> does either",
    },
    cn: {
      fname: "我想在这一行文本中插入一个中断，以便在两行中显示\n不起作用，而<br>可以",
    }
  };
  const txt = Translations["en"];
  // 把\n也转换成<br>，同时直接渲染HTML
  const htmlContent = txt.fname.replace(/\n/g, "<br>");
  
  return (
    <div className="App">
      <p dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  );
};

const rootElement = document.getElementById("root");
render(<App />, rootElement);

⚠️ 注意：dangerouslySetInnerHTML会直接渲染HTML，如果文本里有恶意代码（比如来自用户输入），会有XSS风险，所以只在文本完全可信的时候用哦！

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