React JS中如何将组件属性的转义字符串转为可识别文本？

问题场景 #

在React里格式化文本时遇到两种不同情况：

• 把带\n的字符串存在变量里传递给组件（如const text = "\nBubble\nAir\nSKY"; <myComponent variableText={text} />），组件能正确识别换行；
• 直接把含\n的字符串写在组件属性里（如<myComponent text="\nBubble\nAir\nSky" />），组件收到的却是未解析的原字符串，\n不会被转成换行符。

原因 #

JSX属性中用双引号包裹的字符串是HTML-style字面量字符串，其中的转义字符不会被JavaScript解析；而变量里的字符串是经过JavaScript引擎解析后的，\n已经被转换成实际的换行符。

解决方法 #

方法1：用JS表达式传递属性 #

把属性值放在大括号{}里，让React把它当成JavaScript表达式解析，这样\n会被正确识别：

// 直接传递JS字符串字面量
<myComponent text={"\nBubble\nAir\nSky"} />

// 或者用模板字符串，更直观
<myComponent text={`
Bubble
Air
Sky
`} />

方法2：组件内部解析转义字符 #

如果无法修改属性传递方式（比如属性值来自后端接口或固定配置），可以在组件内部用JSON.parse解析转义字符：

function MyComponent({ text }) {
  // 给字符串套双引号，符合JSON格式要求
  const parsedText = JSON.parse(`"${text}"`);
  // 设置CSS让换行生效
  return <div style={{ whiteSpace: 'pre-line' }}>{parsedText}</div>;
}

⚠️ 注意：如果原始字符串包含双引号，需要先转义（比如把"换成\"），否则JSON.parse会报错。

方法3：配合CSS让换行显示 #

不管用哪种方法，要让换行在页面上显示出来，需要给渲染文本的容器设置white-space样式：

• white-space: pre-line：保留换行，合并连续空格（推荐，适合多数场景）
• white-space: pre：完全保留原始格式（包括空格和换行）
• white-space: pre-wrap：保留换行，允许内容换行

示例：

<div style={{ whiteSpace: 'pre-line' }}>{yourText}</div>

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