本文介绍如何在 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 => (
))}