React中如何在JSX段落的字符串内添加换行？

这个问题我碰到过好几次了！因为React在渲染字符串的时候，默认会把\n这类转义字符当成普通空格处理，而且HTML本身也会合并连续的空白符，所以直接用\n肯定没用。结合你的情况（字符串来自服务器，带**new-line**标记），给你几个靠谱的解决方案：

方法1：替换标记为<br />并使用dangerouslySetInnerHTML #

这是最直接的方式，把服务器返回的**new-line**替换成HTML的换行标签，然后让React直接渲染这段HTML内容。不过要注意：只有当你完全信任服务器返回的内容时才用这个方法，避免XSS攻击风险。

render() {
  // 实际开发中这里是服务器返回的字符串
  const str = 'Line 1. **new-line** Line 2.';
  // 全局替换标记为<br />
  const formattedContent = str.replace(/\*\*new-line\*\*/g, '<br />');
  
  return (
    <p dangerouslySetInnerHTML={{ __html: formattedContent }} />
  );
}

方法2：分割字符串后渲染React元素（更安全） #

如果服务器返回的内容不可完全信任，推荐用这种方式——把字符串按**new-line**分割成数组，然后逐个渲染片段，在片段之间插入<br />标签。这样不用直接渲染HTML，安全性更高。

import React from 'react';

render() {
  const str = 'Line 1. **new-line** Line 2.';
  // 按标记分割成数组
  const contentParts = str.split(/\*\*new-line\*\*/);
  
  return (
    <p>
      {contentParts.map((part, index) => (
        <React.Fragment key={index}>
          {part}
          {/* 最后一个片段后面不要加<br /> */}
          {index !== contentParts.length - 1 && <br />}
        </React.Fragment>
      ))}
    </p>
  );
}

方法3：用CSS样式实现换行 #

如果你不想处理HTML标签，也可以用CSS的white-space属性。先把**new-line**替换成\n，然后给<p>标签设置white-space: pre-wrap，这样浏览器会保留换行符并自动换行。

render() {
  const str = 'Line 1. **new-line** Line 2.';
  const formattedStr = str.replace(/\*\*new-line\*\*/g, '\n');
  
  return (
    <p style={{ whiteSpace: 'pre-wrap' }}>{formattedStr}</p>
  );
}

你可以根据自己的场景选最合适的方法：如果内容可信，方法1最省心；如果要考虑安全，方法2更稳妥；如果是纯文本场景，方法3的CSS方案也很方便。

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