本文介绍一种基于 react hook 的通用方案，用于实时将表单输入值动态注入模板字符串中的 `${key}` 占位符，支持任意数量的变量（如 `${firstname}`、`${lastname}` 等），避免手动维护多个状态或重复逻辑。
在构建可配置模板编辑器、邮件/短信内容预览、动态文案生成等场景中，常需将用户输入实时映射到模板字符串（如 "Hello ${firstName} ${lastName}"）中。若为每个变量单独声明 useState 并分别监听，代码会迅速变得冗余且难以扩展。更优解是采用统一数据结构 + 响应式更新模式。
核心思路如下：
- 使用一个对象（如 data）集中管理所有变量及其当前值，键名与模板中 ${key} 的 key 严格对应；
- 表单 <input> 通过 name 属性自动关联变量名，onChange 统一调用 setData 更新对应字段；
- 利用 useEffect 监听 data 对象变化，遍历其所有键，对模板字符串执行批量 .replace() 替换，确保任意字段更新均触发全文本刷新。
以下是完整实现示例（已适配任意变量数量）：
import { useState, useEffect } from "react";
export default function App() {
// ✅ 所有变量统一存于 data 对象中，键即模板占位符名
const [data, setData] = useState({
firstName: "",
lastName: "",
email: "",
company: ""
// 可无限扩展，无需修改逻辑
});
// ? 原始模板（支持任意数量 ${xxx}）
const [template, setTemplate] = useState(
"Hi ${firstName} ${lastName}, welcome to ${company}! Contact us at ${email}."
);
// ?️ 实时渲染结果
const [renderedText, setRenderedText] = useState(template);
// ? 统一输入处理器：根据 input.name 动态更新 data 中对应字段
const handleInputChange = (e) => {
const { name, value } = e.target;
setData(prev => ({ ...prev, [name]: value }));
};
// ⚡ 响应式更新：data 任一字段变化，立即重渲染 template
useEffect(() => {
let result = template;
Object.keys(data).forEach(key => {
const placeholder = `${'${'}${key}${'}'}`;
// 注意：仅替换首次匹配（避免正则全局污染），如需全部替换可改用正则 /g
result = result.replace(placeholder, data[key]);
});
setRenderedText(result);
}, [data, template]); // 依赖 data 和 template，确保模板变更也触发重算
return (
<div className="App">
<h3>Preview:</h3>
<p style={{ whiteSpace: "pre-line", backgroundColor: "#f5f5f5", padding: "12px" }}>
{renderedText}
</p>
<h3>Inputs:</h3>
{Object.keys(data).map(key => (
<div key={key} style={{ margin: "8px 0" }}>
<label>{key.charAt(0).toUpperCase() + key.slice(1)}: </label>
<input
type="text"
name={key}
value={data[key]}
onChange={handleInputChange}
style={{ marginLeft: "8px", padding: "4px" }}
/>
</div>
))}
</div>
);
}✅ 关键优势说明：
- 零耦合扩展：新增变量只需在 data 初始对象中添加键值对，并在模板中使用 ${newKey}，无需改动任何逻辑；
- 精准替换：使用字符串字面量 ('${' + key + '}') 构造占位符，避免正则特殊字符误匹配（如 ${user.name} 中的点号）；
- 安全兜底：未填写的字段默认为空字符串，不会残留 ${xxx}；若需保留未填充占位符，可将 replace 改为条件判断；
- 性能可控：useEffect 依赖数组明确限定触发时机，避免不必要的重复计算。
⚠️ 注意事项：
- 模板中占位符必须严格为 ${key} 格式（无空格、大小写敏感），否则无法匹配；
- 如需支持嵌套对象（如 ${user.profile.name}），需升级为递归解析或使用 lodash/template 等专业模板引擎；
- 大量变量高频更新时，可考虑 useMemo 缓存 renderedText 或节流 useEffect，但日常场景无需优化。
该方案以最小心智负担实现了高内聚、低耦合的模板动态渲染，是 React 应用中处理变量化文案的推荐实践。
