web-dev-qa-db-fra.com

La propriété n'existe pas sur le type 'DetailedHTMLProps, HTMLDivElement>' avec React 16

Depuis React 16 permet maintenant attributs DOM personnalisés , j'ai essayé de l'exploiter dans mon code TypeScript:

import * as React from 'react';

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

mais recevez ce message d'erreur:

erreur TS2339: la propriété 'taille' n'existe pas sur le type 'DetailedHTMLProps <HTMLAttributes <HTMLDivElement>, HTMLDivElement>'.

Ce thread suggère de faire un module augmentation, alors j'ai essayé de cette façon:

import * as React from 'react';

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

Même message d'erreur.

Enfin, j'ai aussi essayé de déclarer page comme une nouvelle balise HTML:

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

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

Il supprime le message d'erreur, mais l'attribut size est complètement ignoré dans le code compilé, et je me retrouve avec:

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

Idéalement, le dernier est ma solution préférée. J'aimerais utiliser l'attribut personnalisé size à côté de la balise personnalisée 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
  }
}
reactjstypescript
18
Greg Forel

HTML prend en charge le type d'attribut data- * pour les attributs personnalisés. Vous pouvez lire à ce sujet plus ici .

Définition et utilisation Les attributs data- * sont utilisés pour stocker des données personnalisées privées sur la page ou l'application.

Les attributs data- * nous permettent d'intégrer des attributs de données personnalisés à tous les éléments HTML.

Les données stockées (personnalisées) peuvent ensuite être utilisées dans le code JavaScript de la page pour créer une expérience utilisateur plus attrayante (sans appel Ajax ni requête de base de données côté serveur).

Les attributs data- * se composent de deux parties:

  • Le nom de l'attribut ne doit pas contenir de lettres majuscules et doit comporter au moins un caractère longtemps après le préfixe "data-"
  • La valeur d'attribut peut être n'importe quelle chaîne

Remarque: Les attributs personnalisés précédés de "data-" seront complètement ignorés par l'agent utilisateur.

Plutôt que d'utiliser simplement size="A4" vous pouvez utiliser data-size="A4"

Exemple 

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

Pas entièrement lié, mais supposons que vous souhaitiez accepter des attributs supplémentaires dans votre composant personnalisé, à l'aide de l'opérateur spread tel que ...rest. Voici comment vous le faites:

interface Props{
  icon?: string; 
}

type Button = Props & React.HTMLProps<HTMLButtonElement> & React.HTMLAttributes<HTMLButtonElement>;

function Button({ 
  icon,
  ...rest
}: Button) {
  return (
    <button 
      {...rest}
    >
     {icon && <span>{icon}</span>}
     {children}       
    </button>
}
3
mayid

Fichier de définition du type de réaction (par défaut - index.d.ts quand je regarde avec create-react-app) contient la liste de tous les éléments HTML standard, ainsi que des attributs connus.

Pour autoriser les attributs HTML personnalisés, vous devez définir le type de saisie. Faites cela en développant l'interface HTMLAttributes:

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    custom?: string;
  }
}

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    block?: string;
  }
}

Question possiblement liée:

Comment ajouter des attributs aux éléments HTML existants dans TypeScript/JSX?

0
yuval.bl