React中如何将转义字符串转换为实际可解析的文本格式？

你遇到的核心问题是：JSX属性字符串遵循HTML属性的转义规则，直接写在""里的\n会被当成字面量的\n（反斜杠+n），而非JS语法中的换行符；但通过JS变量或表达式传递时，会按JS语法解析转义字符。

以下是几种实用解决办法：

1. 用JS表达式传递属性 #

把字符串放在{}中，让React按JS语法解析转义字符，效果和变量传递完全一致：

<myComponent text={`\nBubble\nAir\nSky`} />

也可以直接使用普通JS字符串表达式：

<myComponent text={"\nBubble\nAir\nSky"} />

2. 组件内部解析转义字符 #

如果只能接收带字面量\n的字符串，可在组件内编写解析函数处理：

// 仅解析换行符的简易函数
const parseNewlines = (str) => str.replace(/\\n/g, '\n');

// 组件内使用示例
const MyComponent = ({ text }) => {
  const parsedText = parseNewlines(text);
  return <div>{parsedText}</div>;
};

若需处理更多转义字符（如\t、\"），可扩展替换规则，或用JSON.parse做通用解析（注意原字符串需符合JSON格式）：

// 用JSON.parse解析合法格式的转义字符串
const parsedText = JSON.parse(`"${text}"`);

3. 渲染时保留换行效果 #

如果需要在页面上显示换行，除了解析字符串，还可以：

• 用<pre>标签包裹文本，它会自动保留原始换行和空格：

<pre>{parsedText}</pre>

• 将解析后的换行符替换为<br />标签，这种方式比dangerouslySetInnerHTML更安全：

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

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