如何在 React 中动态替换模板字符串中的占位符变量_技术教程

本文介绍一种基于 react hook 的通用方案，用于实时将表单输入值动态注入模板字符串中的 `${key}` 占位符，支持任意数量的变量（如 `${firstname}`、`${lastname}` 等），避免手动维护多个状态或重复逻辑。

在构建可配置模板编辑器、邮件/短信内容预览、动态文案生成等场景中，常需将用户输入实时映射到模板字符串（如 "Hello ${firstName} ${lastName}"）中。若为每个变量单独声明 useState 并分别监听，代码会迅速变得冗余且难以扩展。更优解是采用统一数据结构 + 响应式更新模式。

核心思路如下：

使用一个对象（如 data）集中管理所有变量及其当前值，键名与模板中 ${key} 的 key 严格对应；
表单通过 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 (
    
      Preview:
      
        {renderedText}
      

      Inputs:
      {Object.keys(data).map(key => (
        
          {key.charAt(0).toUpperCase() + key.slice(1)}: 
          
        
      ))}
    
  );
}