Свойство не существует для типа ' DetailedHTMLProps, HTMLDivElement>' с React 16

поскольку React 16 теперь позволяет пользовательские атрибуты DOM, я попытался использовать это в моем коде Typescript:

import * as React from 'react';

<div className="page" size="A4">
</div>

но получить это сообщение об ошибке:

ошибка TS2339: свойство "размер" не существует для типа 'DetailedHTMLProps, HTMLDivElement>'.

этой нить предлагает сделать module augmentation, поэтому я попробовал так:

import * as React from 'react';

declare module 'react' {
     interface HTMLProps<T> {
        size?:string;
    }    
}

та же ошибка сообщение.

наконец, я также попытался объявить page как новый HTML-тег:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      page: any
    }
  }
}

<page className="page" size="A4">
</page>

он избавляется от сообщения об ошибке, но size атрибут полностью игнорируется в скомпилированном коде, и я заканчиваю:

<page className="page">
</page>

в идеале, последнее является моим предпочтительным решением. Я хотел бы использовать size пользовательский атрибут рядом с page пользовательский тег.

tsconfig.js

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "allowUnusedLabels": true,
    "allowUnreachableCode": true
  }
}
6
reactjs typescript

1 ответов

HTML поддерживает тип атрибута data-* для пользовательских атрибутов. Вы можете прочитать об этом больше здесь.

определение и использование атрибуты data-* используются для хранения пользовательских данные, закрытые для страницы или приложения.

данные-* атрибуты дают нам возможность вставлять пользовательские данные атрибуты для всех элементов HTML.

сохраненные (пользовательские) данные затем могут использоваться в JavaScript страницы для создать более привлекательный пользовательский интерфейс (без каких-либо вызовов Ajax или запросы базы данных на стороне сервера).

атрибуты data-* состоят из двух частей:

  • имя атрибута не должно содержать прописных букв и должно быть хотя бы одним символом после префикса "data-"
  • значением атрибута может быть любая строка

Примечание: пользовательские атрибуты с префиксом "data -" будут полностью игнорируется агентом пользователя.

вместо того, чтобы просто использовать size="A4" можно использовать data-size="A4"

пример

<div className="page" data-size="A4">
  // ....
</div>
6