プロパティが「DetailedHTMLProps、HTMLDivElement>」タイプに存在しませんがので16

Question

に反応16を反応させるのが今custom DOM attributesすることができます、私は私の活字体のコードでこれを活用してみました：

import * as React from 'react'; 

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

が、このエラーメッセージが表示されます。

を

エラーTS2339： 'size'プロパティがタイプ 'DetailedHTMLProps < HTMLAttributes < HTMLDivElement>、HTMLDivElement>'に存在しません。

このthreadはmodule augmentationを行うために提案するので、私はこの方法を試してみました：

import * as React from 'react'; 

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

同じエラーメッセージ。

最後に、私はまた、新しいHTMLタグとしてpageを宣言しようとした：

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

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

これは、エラーメッセージを取り除きますが、size属性は完全に無視されコンパイルされたコードでは、と私はで終わります：

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

理想的には、最後のものが私の好みの解決策です。 pageカスタムタグの横にsizeカスタム属性を使用したいと思います。

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をサポートしてデータ - *カスタム属性のための属性タイプ。あなたはそれについてもっと読むことができますhere。

の定義と使用法データ - *属性は、ページまたはアプリケーションにプライベートカスタム データを格納するために使用されます。

data- *属性を使用すると、すべてのHTML要素にカスタムデータ 属性を埋め込むことができます。

保存された（カスタム）データは、ページのJavaScriptから まで使用できます（Ajaxコールや サーバー側のデータベースクエリなし）。

DATA- *属性は2つの部分で構成されています

• 属性名は、「データ - 」
• 任意の大文字を含むべきではない、と 長い接頭辞の後に少なくとも1つの文字でなければなりませんカスタム「データ - 」完全にユーザエージェントによって無視される接頭辞属性：属性値は任意の文字列

注意することができます。

だけではなく、私がどのように `しようについて、活字体についてあまり知らないが、アイデアのためにstupid-こと-mightあなたはdata-size="A4"

例

に

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