React中为按钮添加动态事件属性：可行性及替代方案咨询

你给出的写法不可行，原因有两个：

1. JSX语法不支持直接用{props.actionType}作为属性键的插值写法，这种结构会被解析为无效的JSX；
2. 代码存在拼写错误：Props定义的是actionCb，但组件内调用时写的是props.actionCB，大小写不匹配会导致回调无法正确绑定。

解决办法 #

方法1：对象展开语法构建动态属性

先把动态事件属性组装成一个对象，再通过...展开到button元素上，这是React处理动态属性的标准方式：

interface ButtonProps {
    actionType: string,
    // 避免用any，给回调加基础类型约束
    actionCb: (...args: any[]) => void
}

const Button = (props: ButtonProps) => {
  // 构建动态事件属性对象
  const dynamicEvent = {
    [props.actionType]: props.actionCb
  }
  
  return (
    <button {...dynamicEvent}>
      Click me
    </button>
  )
}

方法2：添加类型安全约束（推荐）

如果想避免传入非法事件类型（比如把onClick写成onclick），可以通过TypeScript类型约束，限制actionType只能是按钮支持的合法事件名：

import type { ButtonHTMLAttributes } from 'react';

// 提取按钮支持的事件类型，可按需增减
type ValidButtonEvent = keyof Pick<
  ButtonHTMLAttributes<HTMLButtonElement>,
  'onClick' | 'onMouseDown' | 'onMouseEnter' | 'onBlur'
>;

interface ButtonProps {
    actionType: ValidButtonEvent,
    // 自动匹配对应事件的回调类型
    actionCb: ButtonHTMLAttributes<HTMLButtonElement>[ValidButtonEvent]
}

const Button = (props: ButtonProps) => {
  const dynamicEvent = {
    [props.actionType]: props.actionCb
  }
  
  return (
    <button {...dynamicEvent}>
      Click me
    </button>
  )
}

这种写法能在编译阶段拦截错误的事件类型输入，提升代码健壮性。

内容的提问来源于stack exchange，提问作者krozero