JavaScript 不支持直接用变量名进行解构赋值，但可通过先获取对象再按动态键访问的方式间接实现“动态解构”，本质是利用计算属性名返回对象，再手动提取所需键。

JavaScript 不支持直接用变量名进行解构赋值，但可通过先获取对象再按动态键访问的方式间接实现“动态解构”，本质是利用计算属性名返回对象，再手动提取所需键。

在 React 自定义 Hook（如 useField）中，我们常希望根据传入参数（如 code: 'date'）动态生成字段名（如 date 和 setDate），并支持解构使用。虽然 ES6 解构语法不支持运行时计算的键名直接解构（例如 const { [code]: value, [set${code}]: setValue } = obj 是语法错误），但可通过以下方式优雅达成目标：

✅ 正确做法：返回含动态键的对象，再手动解构（推荐）

export const useField = ({ code, fieldType, label, type }: FilterFieldProps) => {
  const [value, setValue] = useState<date null>(null);

  const jsx = (
    <formgroup label="{label}">
      {(() => {
        switch (fieldType) {
          case 'datePicker':
            return (
              <datepicker onchange="{setValue}" selected></datepicker>
            );
          default:
            return null;
        }
      })()}
    </formgroup>
  );

  // 动态注入字段：code → 'date' ⇒ 键名为 'date'；`set${code}` → 'setDate'
  return {
    test: 'test',           // 静态键（可选）
    [code]: value,          // ✅ 计算属性名：{ date: value }
    [`set${code}`]: setValue, // ✅ 计算属性名：{ setDate: setValue }
    jsx,
  };
};

// 使用时：先调用 Hook 获取对象，再解构（键名需与传入的 code 一致）
const { date, setDate, jsx } = useField({
  code: 'date',
  fieldType: 'datePicker',
  label: '选择日期',
});

// ✅ 成功获得：date（值）、setDate（函数）、jsx（JSX 元素）</date>

⚠️ 注意事项

• 解构时键名必须字面量匹配：const { date, setDate } = ... 中的 date 和 setDate 是静态字符串，不是变量。你不能写 const { [code]: value } = ... —— 这在解构左侧是非法语法。
• 确保 code 值合法：避免空字符串、特殊字符或保留字（如 if, class），否则会导致对象键无效或运行时错误。
• 类型安全建议（TypeScript）：为提升类型提示，可结合泛型与 as const 或 Record + 类型断言，或使用 satisfies（TS 4.9+）约束返回类型：

return {
  test: 'test',
  [code]: value,
  [`set${code}`]: setValue,
  jsx,
} as const satisfies {
  test: string;
  [k in typeof code]: typeof value;
  [k in `set${Capitalize<typeof code>}`]: typeof setValue;
  jsx: JSX.Element;
};</typeof>

? 替代思路（不推荐用于 Hook，仅作了解）

若真需“完全动态解构”，可借助解构后立即重命名变量：

Galileo TypeScript sdk

完整的Galileo AI平台 TypeScript/JS SDK 参考，用于评估、观察和保护 GenAI 应用。适用于构建 Node.js 或 TypeScript 项目。

下载

const fieldObj = useField({ code: 'price' });
const value = fieldObj.price;
const setValue = fieldObj.setprice;
const { jsx } = fieldObj; // 静态键仍可解构

但这种方式丧失了语义清晰性与可读性，违背 Hook 设计初衷。

✅ 总结

动态属性解构的本质不是“解构动态名”，而是构造含动态键的对象，再以已知静态名解构。只要调用方明确 code 的值（如 'date'），就能自然写出 const { date, setDate } = useField(...) —— 简洁、高效、类型友好，且完全符合 React 最佳实践。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南