本文介绍如何在 react 中动态管理多个模板变量（如 `${firstname}`、`${lastname}`），通过状态对象与 useeffect 实现模板字符串的实时、准确替换，避免覆盖冲突，支持任意数量的占位符。
在构建表单驱动的模板编辑器（如邮件模板、消息生成器）时，一个常见需求是：用户在输入框中修改字段（如“姓名”“邮箱”），页面上预览的模板文本需即时反映最新值，且每个 ${variableName} 占位符必须被其对应输入值精准替换。若采用逐个 replace() 或顺序处理的方式，极易因替换顺序、重复匹配或状态不同步导致错误（例如 ${firstName} 被误替换成 ${lastName} 的值）。
核心解法在于解耦变量状态与模板逻辑：将所有可变字段统一存入一个对象状态（如 data），再通过 useEffect 监听该对象变化，遍历其键值对，对原始模板执行精确键名匹配替换。这样既保证替换的确定性，又天然支持任意数量的变量扩展。
以下为优化后的实现代码（已验证兼容 10+ 变量场景）：
import { useState, useEffect } from "react";
export default function App() {
// ✅ 所有模板变量集中管理：key = 占位符名（无$和{}），value = 当前输入值
const [data, setData] = useState({
firstName: "",
lastName: "",
email: "",
company: ""
// 可无限追加：age, phone, role...
});
// ✅ 原始模板（含 ${xxx} 占位符），保持不变
const [template, setTemplate] = useState(
"Hi ${firstName} ${lastName}, welcome to ${company}. Contact us at ${email}."
);
// ✅ 实时渲染的预览文本
const [preview, setPreview] = useState(template);
// ✅ 统一输入处理器：根据 input 的 name 属性动态更新对应字段
const handleInputChange = (e) => {
const { name, value } = e.target;
setData(prev => ({
...prev,
[name]: value
}));
};
// ✅ 关键逻辑：当 data 任一字段变更时，重新生成预览文本
useEffect(() => {
let result = template;
Object.entries(data).forEach(([key, value]) => {
// ? 精确匹配 ${key}，避免子串误替（如 ${name} 不匹配 ${firstName}）
const placeholder = `${'${'}${key}${'}'}`;
result = result.replace(new RegExp(placeholder, 'g'), value);
});
setPreview(result);
}, [data, template]); // 注意：template 也应作为依赖项，确保模板变更后重计算
return (
模板预览：
{preview || '(空)'}
变量输入区：
{Object.keys(data).map(key => (
))}
);
}✅ 关键设计亮点说明：
- 安全替换：使用 new RegExp(placeholder, 'g') 确保全局、精确匹配（如 ${email} 不会误匹配 ${emailAddress}）；
- 可扩展性强：只需在 data 初始状态中添加新键（如 userId: ""），并确保模板中存在对应 ${userId} 占位符，无需修改任何逻辑；
- 响应式更新：useEffect 依赖 [data, template]，既响应变量变更，也支持运行时切换不同模板；
- 输入一致性：value={data[key]} 实现受控组件，防止输入失焦后状态回退。
⚠️ 注意事项：
- 若模板中存在未定义在 data 中的占位符（如 ${middleName} 但 data 无该 key），它将原样保留——这是预期行为，便于调试；
- 如需支持嵌套占位符（如 ${user.profile.name}），需升级为递归解析或引入专用模板引擎（如 lodash.template）；
- 生产环境建议对用户输入做基础 XSS 过滤（如 DOMPurify.sanitize()），尤其当预览内容直接插入 dangerouslySetInnerHTML 时。
掌握这一模式，你就能轻松构建灵活、健壮的动态模板系统，无论是个性化邮件、合同生成，还是低代码平台的表达式引擎，都可在此基础上快速演进。
