React中如何导入带格式的模板 无需大量标签保留原有排版

方案1：使用 dangerouslySetInnerHTML 渲染HTML格式模板 #

如果你的信函本身已经是带HTML排版标签的内容，用这个方法最直接，不需要引入额外依赖：

// 定义带HTML格式的信函模板，来源可控的情况下无安全风险
const letterTemplate = `
<h3>商务告知函</h3>
<p><strong>致：XX合作方</strong></p>
<p>您好！非常感谢贵司长期以来的支持与信任。</p>
<p>现告知如下事项：...</p>
<p style="text-align: right;">发函单位：XX公司<br>2024年X月X日</p>
`

function Letter() {
  return <div dangerouslySetInnerHTML={{ __html: letterTemplate }} />
}

注意：仅当模板内容为你方可控的内部内容时使用该方案，若模板包含用户提交的未过滤内容，会存在XSS安全风险。

方案2：使用Markdown解析组件渲染 #

如果希望模板更易维护，不需要写HTML标签，可以将模板存为Markdown格式的字符串，引入轻量的React Markdown解析组件自动转换为带排版的内容：

// Markdown格式的信函模板，维护时直接改Markdown语法即可
const letterTemplate = `
### 商务告知函
**致：XX合作方**
您好！非常感谢贵司长期以来的支持与信任。
现告知如下事项：
- 事项1：xxx
- 事项2：xxx
发函单位：XX公司  
2024年X月X日
`

// 引入解析组件后直接渲染即可自动生成对应排版
function Letter() {
  return <ReactMarkdown>{letterTemplate}</ReactMarkdown>
}

该方案无需手动写大量JSX标签，模板修改成本极低，适合需要频繁调整信函格式的场景。

方案3：无依赖的轻量场景方案（仅需保留换行、段落格式） #

如果你之前用模板字面量失效，本质是因为HTML默认会合并空白字符和换行，你可以用<pre>标签配合自定义样式保留格式，同时调整样式匹配正常文档排版：

const letterTemplate = `
商务告知函

致：XX合作方
您好！非常感谢贵司长期以来的支持与信任。

现告知如下事项：
1. 事项1：xxx
2. 事项2：xxx

发函单位：XX公司
2024年X月X日
`

function Letter() {
  return (
    <pre style={{
      whiteSpace: 'pre-wrap',
      wordBreak: 'break-word',
      fontFamily: 'inherit',
      fontSize: 'inherit'
    }}>
      {letterTemplate}
    </pre>
  )
}

如果需要额外的加粗、标题格式，在模板字符串中穿插少量<strong>、<h3>标签即可，无需给每一段加<p>标签。

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