属性不上类型存在“DetailedHTMLProps，HTMLDivElement>”与之反应16

由于阵营16现在允许custom DOM attributes，我想利用这个在我的打字稿代码：属性不上类型存在“DetailedHTMLProps，HTMLDivElement>”与之反应16

import * as React from 'react'; 

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

但收到此错误信息：

错误TS2339：属性“大小”不存在于类型 '详细HTML详细信息< HTMLAttributes < HTMLDivElement>，HTMLDivElement>'。

这thread建议做一个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 
    } 
}

来源

2017-09-14 Greg Forel

我不知道很多关于打字稿，但一个想法-might是stupid-，怎么样努力'数据size'？ – bennygenel

哇...它摆脱了我的错误，并编译！是什么让你想到这个，为什么这个工作与诸如大小这样的“非短跑”名字相反？你可以写这个答案，以便我可以验证吗？ –

HTML支持数据 - *属性类型的自定义属性。你可以阅读更多here。

定义和用法数据 - *属性是用来存储自定义数据专用页面或应用程序。

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

然后可以在页面的JavaScript中使用存储的（自定义）数据，以创建更具吸引力的用户体验（不需要任何Ajax调用或服务器端数据库查询）。

数据 - *属性由两个部分组成：

属性名称不应包含任何大写字母，且必须至少有一个字符长的前缀“数据 - ”

后属性值可以是任何字符串

注：自定义属性前缀为“数据 - ”将通过用户代理被完全忽略。

而不是仅仅使用size="A4"可以使用data-size="A4"

例

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

来源

2017-09-14 09:57:20 bennygenel

它的工作原理，但我不确定这是完整的解释：我试过页面大小，而不是数据大小，它也可以。任何名字我尝试与' - '在它似乎工作，就好像Typescript忽略警告并强制汇编。谢谢！ –

就像我说的，我对TypeScript不太了解。可能有更好的解释。谢谢你upvote虽然 – bennygenel

属性不上类型存在“DetailedHTMLProps，HTMLDivElement>”与之反应16

回答

相关问题