本文详解 React 中处理字符串换行符（ ）的常见陷阱，演示如何统一解析 JS 变量传入与 JSX 属性直传的文本，并安全实现基于缩进/符号（如 -、#）的自动 HTML 格式化（支持段落、无序/有序列表）。

本文详解 react 中处理字符串换行符（` `）的常见陷阱，演示如何统一解析 js 变量传入与 jsx 属性直传的文本，并安全实现基于缩进/符号（如 `-`、`#`）的自动 html 格式化（支持段落、无序/有序列表）。

在 React 中，字符串中的换行符 在不同上下文中的行为差异常引发格式渲染问题：当通过 JavaScript 变量（如 const text = " Bubble Air SKY"）传入组件时， 被正确解析为换行；但若直接在 JSX 属性中书写 <mycomponent text=" Bubble Air SKY"></mycomponent>，Babel 会将反斜杠转义为字面量 \n，导致实际接收的是 "\nBubble\nAir\nSKY" —— 这并非预期的换行结构，而是包含反斜杠的普通字符串。

要解决这一根本问题，需在组件内部对输入文本做标准化预处理：优先尝试 JSON 解析（兼容属性直传的转义字符串），失败则直接使用原始值。例如：

function normalizeNewlines(text) {
  if (typeof text !== 'string') return '';
  try {
    // 尝试解析可能被转义的字符串（如 JSX 中的 "
" → "\n"）
    // 注意：仅对纯字符串字面量有效，不适用于含变量插值的复杂表达式
    const parsed = JSON.parse(`"${text}"`);
    return typeof parsed === 'string' ? parsed : text;
  } catch {
    return text;
  }
}

在此基础上，可构建健壮的 FormattedText 组件，支持多级嵌套列表与段落自动转换：

Reactivation Specialist · 流失召回

适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p

下载

function FormattedText({ text }) {
  const normalized = normalizeNewlines(text);

  const format = () => {
    if (!normalized?.trim()) return '';

    const lines = normalized.trim().split('
');
    const result = [];
    const ulStack = [];
    const olStack = [];

    for (const line of lines) {
      const trimmed = line.trim();
      if (!trimmed) continue;

      // 无序列表：- 或 -- 或 --- ...
      if (/^-+ /.test(line)) {
        const level = (line.match(/^-/g) || []).length;
        const content = line.replace(/^-+ /, '').trim();

        while (ulStack.length > level) {
          result.push('</ul>');
          ulStack.pop();
        }
        if (ulStack.length < level) {
          result.push('<ul>');
          ulStack.push(level);
        }
        result.push(`<li>${escapeHtml(content)}</li>`);
      }
      // 有序列表：# 或 ## 或 ### ...
      else if (/^#+ /.test(line)) {
        const level = (line.match(/^#/g) || []).length;
        const content = line.replace(/^#+ /, '').trim();

        while (olStack.length > level) {
          result.push('</ol>');
          olStack.pop();
        }
        if (olStack.length < level) {
          result.push('<ol>');
          olStack.push(level);
        }
        result.push(`<li>${escapeHtml(content)}</li>`);
      }
      // 普通段落（保留原始缩进语义，仅换行）
      else {
        result.push(`${escapeHtml(trimmed)}<br/>`);
      }
    }

    // 清空未闭合标签
    while (ulStack.length) { result.push('</ul>'); ulStack.pop(); }
    while (olStack.length) { result.push('</ol>'); olStack.pop(); }

    return result.join('');
  };

  return (
    <div 
      className="formatted-text" 
      dangerouslySetInnerHTML={{ __html: format() }} 
    />
  );
}

// 安全转义 HTML 特殊字符，防止 XSS
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "<")
    .replace(/>/g, ">")
    .replace(/"/g, """)
    .replace(/'/g, "&#039;");
}

✅ 关键注意事项：

• dangerouslySetInnerHTML 是必要但高风险的 API，务必对所有动态内容执行 escapeHtml() 处理，禁止直接插入用户未过滤的输入；
• JSX 属性中避免手动拼接 字符串，推荐统一通过变量传入（如 text={dynamicText}）；
• 若需支持更复杂 Markdown（如标题、代码块、链接），建议集成成熟库如 remark-react 或 react-markdown，而非自行解析；
• 此方案默认忽略行首空格缩进语义（仅识别 -/# 前缀），如需深度缩进解析（如 YAML 风格），需扩展层级检测逻辑。

通过标准化输入 + 安全渲染 + 结构化解析，即可在 React 中稳定实现“所写即所得”的文本自动格式化能力。