类型“DetailedHTMLProps, HTMLDivElement>"上不存在属性与反应 16 [英] Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16

问题描述

由于 React 16 现在允许 自定义 DOM 属性，我尝试在我的 Typescript 代码中利用它:

import * as React from 'react';<div className="page" size="A4">

但收到此错误消息:

<块引用>

错误 TS2339:类型上不存在属性大小"'详细的HTMLProps, HTMLDivElement>'.

这个线程 建议做一个模块扩充，所以我尝试了这种方式:

import * as React from 'react';声明模块反应"{界面 HTMLProps<T>{大小?:字符串；}}

同样的错误信息.

最后，我还尝试将 page 声明为一个新的 HTML 标签:

声明全局{命名空间 JSX {接口内在元素{页面:任何}}}<page className="page" size="A4"></页面>

它去掉了错误信息，但是size属性在编译后的代码中完全被忽略了，我最终得到:

</页面>

理想情况下，最后一个是我的首选解决方案.我想在 page 自定义标记旁边使用 size 自定义属性.

<块引用>

tsconfig.js

<代码>{编译器选项":{"outDir": "build/dist",模块":esnext"，"目标": "es5","lib": ["es6", "dom"],"sourceMap": 真,"allowJs": 真,"jsx": "反应","moduleResolution": "节点","rootDir": "src",forceConsistentCasingInFileNames":真，"noImplicitReturns": 真,"noImplicitThis": 真,"noImplicitAny": 真,"strictNullChecks": 真,"suppressImplicitAnyIndexErrors": true,allowSyntheticDefaultImports":真，noUnusedLocals":假，noUnusedParameters":假，allowUnusedLabels":真，allowUnreachableCode":真}}

解决方案

HTML 支持自定义属性的 data-* 属性类型.您可以在此处阅读更多相关信息.

<块引用>

定义和用法 data-* 属性用于存储自定义页面或应用程序的私有数据.

data-* 属性使我们能够嵌入自定义数据所有 HTML 元素的属性.

然后可以在页面的 JavaScript 中使用存储的(自定义)数据来创建更具吸引力的用户体验(无需任何 Ajax 调用或服务器端数据库查询).

data-* 属性由两部分组成:

• 属性名称不能包含任何大写字母，并且必须在前缀data-"之后至少有一个字符长
• 属性值可以是任意字符串

注意:以data-"为前缀的自定义属性将被用户代理完全忽略.

您可以使用 data-size="A4"

而不是仅使用 size="A4"

示例

//....

Since React 16 now allows custom DOM attributes, I tried to leverage this in my Typescript code:

import * as React from 'react';

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

but receive this error message:

error TS2339: Property 'size' does not exist on type 'DetailedHTMLProps< HTMLAttributes< HTMLDivElement>, HTMLDivElement>'.

This thread suggests to do a module augmentation, so I tried this way:

import * as React from 'react';

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

Same error message.

Finally, I also tried to declare page as a new HTML tag:

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

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

It gets rid of the error message, but the size attribute is completely ignored in the compiled code, and I end up with:

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

Ideally, the last one is my preferred solution. I'd like to use the size custom attribute alongside the page custom tag.

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
  }
}

解决方案

HTML supports data-* attribute type for custom attributes. You can read about it more here.

Definition and Usage The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

The data-* attributes consist of two parts:

• The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
• The attribute value can be any string

Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.

Rather than just using size="A4" you can use data-size="A4"

Example

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

这篇关于类型“DetailedHTMLProps, HTMLDivElement>"上不存在属性与反应 16的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！