React中点击按钮访问dataset报Property 'dataset'不存在错误的解决方法

这个报错是因为TypeScript默认把ev.target的类型推断为EventTarget，而EventTarget并没有dataset属性——dataset是HTMLElement才有的专属属性。下面给你两种简单靠谱的解决办法：

方案一：给target做类型断言 #

直接把ev.target断言为HTMLButtonElement，明确告诉TypeScript这是一个按钮元素，这样就能安全访问dataset了：

linkProvider = (ev: React.SyntheticEvent<EventTarget>) => { 
  // 用as做类型断言，指定目标是HTMLButtonElement
  const button = ev.target as HTMLButtonElement;
  console.debug('ev.target', button.dataset['ix']);
}

方案二：使用currentTarget并指定事件元素类型 #

currentTarget是绑定事件的那个元素（也就是你写的<button>），它的类型可以在事件定义时直接指定，代码会更严谨：

// 把事件的泛型参数改成HTMLButtonElement，明确绑定事件的是按钮
linkProvider = (ev: React.SyntheticEvent<HTMLButtonElement>) => { 
  // currentTarget就是绑定事件的button，直接访问dataset
  console.debug('ev.currentTarget', ev.currentTarget.dataset['ix']);
}

这个方案比方案一更稳妥，因为target可能是按钮内部的子元素（比如按钮里嵌套了<span>的情况），但currentTarget永远是绑定事件的那个按钮元素。

另外，你也可以用dataset.ix代替dataset['ix']，写法会更简洁：button.dataset.ix或者ev.currentTarget.dataset.ix。

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