Тип MouseEvent <Element, MouseEvent> нельзя присвоить типу MouseEvent <HTMLDivElement, MouseEvent>

Question

Тип MouseEvent <Element, MouseEvent> нельзя присвоить типу MouseEvent <HTMLDivElement, MouseEvent>

Я пишу приложение для реагирования на машинописном 9X_react.js тексте, в котором я пытаюсь обрабатывать 9X_react-component как правый, так и левый щелчок.

Это мой интерфейс

interface ButtonProps {
    value: CellValue;
    state: CellState;
    row: number;
    col: number;
    onClick(rowParam: number, colParam: number) : (e: React.MouseEvent) => void;
    onContext(rowParam: number, colParam: number) : (e: React.MouseEvent) => void;
}

Теперь 9X_react я объявил функцию обратного вызова, например

const handleContextMenu = (rowParam: number, cellParam: number) => (e: React.MouseEvent) : void => {
      e.preventDefault();
}

и, наконец, объявил 9X_react мой компонент как

Но я получаю сообщение 9X_react-jsx об ошибке

Type '(rowParam: number, cellParam: number) => (e: React.MouseEvent) => void' is not assignable to type '(rowParam: number, colParam: number) => (e: MouseEvent) => void'.
  Type '(e: React.MouseEvent) => void' is not assignable to type '(e: MouseEvent) => void'.
    Types of parameters 'e' and 'e' are incompatible.
      Type 'MouseEvent' is not assignable to type 'MouseEvent'.
        Type 'Element' is missing the following properties from type 'HTMLDivElement': align, accessKey, accessKeyLabel, autocapitalize, and 111 more.  TS2322

    53 |                 state={cell.state} 
    54 |                 onClick={handleCellClick}
  > 55 |                 onContext={handleContextMenu}
       |                 ^
    56 |                 row={rowIndex} 
    57 |                 col={cellIndex} 
    58 |             />

Я не очень разбираюсь в машинописном 9X_react.js тексте, но, по моему мнению, HTMLDivElement 9X_vanilla-typescript должен иметь тип HTMLElement, верно?

J

Jhoncina

reactjs

typescript

Общее количество ответов: 1

Ответ #1

W WeAreYoung · Accepted Answer · 2022-09-11

Решение

Переход с HTMLDivElement на Element решит вашу проблему.

// Before
const handleContextMenu = (...) => (e: React.MouseEvent) : void => {
  ...
}
// After
const handleContextMenu = (...) => (e: React.MouseEvent) : void => {
  ...
}

Пояснение

Отношения 9X_reactjs иерархии выглядят следующим образом:

⌞Элемент 9X_react-component
⌞HTMLElement
⌞HTMLDivElement

ref: Interface HTMLDivElement

В сообщении 9X_atscript об ошибке отображается что-то вроде:

Для 9X_atscript типа "Element" отсутствуют следующие 9X_reactjs свойства типа "HTMLDivElement": align, accessKey, accessKeyLabel, autocapitalize 9X_typescript и еще 111 других. TS2322

Это говорит о том, что 9X_typescript некоторые реквизиты, принадлежащие Element, не 9X_react могут быть найдены в HTMLDivElement.

Тип MouseEvent <Element, MouseEvent> нельзя присвоить типу MouseEvent <HTMLDivElement, MouseEvent>

reactjs

typescript

Решение Переход с HTMLDivElement на Element решит вашу проблему.// Before const handleContextMenu = (...) => (e: React.MouseEvent) : void => { ... } // After const handleContextMenu = (...) => (e: React.MouseEvent) : void => { ... }

Пояснение

Решение
Переход с HTMLDivElement на Element решит вашу проблему.
`// Before const handleContextMenu = (...) => (e: React.MouseEvent) : void => { ... } // After const handleContextMenu = (...) => (e: React.MouseEvent) : void => { ... }`