React中渲染换行符问题：解析\n实现文本多行显示

你的代码没生效的核心原因是：React会自动转义字符串中的HTML标签，直接把<br />拼进字符串里，它只会被当成普通文本显示，不会被解析成实际的换行标签。下面给两种可行的解决方案：

方案一：用dangerouslySetInnerHTML（注意内容需可信） #

这种方式会直接解析字符串里的HTML，但如果文本是用户输入的不可信内容，可能存在XSS风险，仅在内容安全时使用：

function FormatBody() {
  return <div dangerouslySetInnerHTML={{ __html: arr[0].text.replace(/\n/g, "<br />") }} />;
}

方案二：分割文本后逐行渲染（更安全） #

把文本按换行符分割成数组，过滤掉空行后逐行渲染，按需添加换行：

function FormatBody() {
  // 分割文本并过滤空行
  const lines = arr[0].text.split('\n').filter(line => line.trim() !== '');
  
  return (
    <div>
      {lines.map((line, index) => (
        <React.Fragment key={index}>
          {line}
          {/* 最后一行不加换行标签 */}
          {index !== lines.length - 1 && <br />}
        </React.Fragment>
      ))}
    </div>
  );
}

如果希望每行用段落标签包裹，也可以改成这样：

function FormatBody() {
  const lines = arr[0].text.split('\n').filter(line => line.trim() !== '');
  
  return (
    <div>
      {lines.map((line, index) => (
        <p key={index}>{line}</p>
      ))}
    </div>
  );
}

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