使用React 16的类型'DetailedHTMLProps，HTMLDivElement>'不存在该属性

Question

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

import * as React from 'react';

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

但收到以下错误消息：

错误TS2339：类型’DetailedHTMLProps ，HTMLDivElement>‘不存在属性’size’。

这个线程建议做一个moduleaugmentation，所以我尝试了这种方式：

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在pagecustom标签旁边使用custom属性。

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

Answer 1

HTML支持自定义属性的data-
*属性类型。您可以在此处了解更多信息。

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

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

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

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

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

注意： 前缀为“ data-”的自定义属性将被用户代理完全忽略。

不仅size="A4"可以使用，还可以使用data-size="A4"

例

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