La propriété n'existe pas sur le type " DetailedHTMLProps, HTMLDivElement>' à Réagir 16

Depuis Réagir 16 permet maintenant de personnalisé des attributs DOM, j'ai essayé de tirer profit de mon Tapuscrit code:

import * as React from 'react';

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

mais recevoir ce message d'erreur:

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

Ce fil suggère de faire un module augmentation, j'ai donc 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 se débarrasse de la message d'erreur, mais le size attribut est complètement ignoré dans le code compilé, et je me retrouve avec:

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

Idéalement, la dernière est ma solution préférée. Je voudrais utiliser le size attribut personnalisé aux côtés de la page balise personnalisée.

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

Je ne sais pas beaucoup sur la Machine, mais pour une idée -peut-être stupide, de faire l'essai data-size?
Wow... Il s'est débarrassé de mon erreur, et compilé! Ce qui fait que vous pensez de ceci et pourquoi cela fonctionne, par opposition à un "non dash" nom comme la taille? Pourriez-vous écrire que comme une réponse afin que je puisse valider?

OriginalL'auteur Greg Forel | 2017-09-14

reactjs typescript

9

HTML prend en charge les données* type d'attribut pour les attributs personnalisés. Vous pouvez lire à ce sujet plus ici.
Définition et l'Utilisation Les données* les attributs est utilisée pour stocker personnalisé
données de la page ou de l'application.

Les données* les attributs nous donne la possibilité d'intégrer des données personnalisées
attributs sur tous les éléments HTML.

Stockées (personnalisé) les données peuvent ensuite être utilisées dans la page du JavaScript pour
créer une plus attrayantes de l'expérience utilisateur (sans les appels Ajax ou
côté serveur de requêtes de base de données).

Les données* les attributs sont constitués de deux parties:
- Le nom de l'attribut ne doit pas contenir des lettres majuscules, et doivent
  être au moins un caractère de temps après le préfixe "données"
- La valeur de l'attribut peut être n'importe quelle chaîne
Remarque: attributs Personnalisés avec le préfixe "données" sera complètement ignoré par l'agent utilisateur.
Plutôt que de simplement en utilisant size="A4" vous pouvez utiliser data-size="A4"

Exemple
```
<div className="page" data-size="A4">
  //....
</div>
```
Il fonctionne, mais je ne suis pas sûr que c'est l'explication complète: j'ai essayé de la page taille de données de taille, et il fonctionne également. N'importe quel nom j'ai essayer avec un " - " dans il semble fonctionner, comme si la Machine a ignoré l'avertissement et forcé la compilation. Merci!
Comme je l'ai dit je ne connais pas trop le Tapuscrit. Peut-être une meilleure explication. merci pour le upvote si

OriginalL'auteur bennygenel

Pas entièrement liées, mais disons que vous voulez accepter les attributs supplémentaires dans votre composant personnalisé, en utilisant la propagation de l'opérateur comme ...rest. Heres la façon dont 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>
}

OriginalL'auteur mayid

0

Réagir définition de type de fichier (par défaut - index.d.ts lors regarder avec create-react-app) contient la liste de tous les éléments HTML standard, ainsi que des attributs connus.

Afin de permettre personnalisé attributs HTML, vous devez définir, elle est en train de.
Faire que par l'expansion de HTMLAttributes interface:
```
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;
  }
}
```
Éventuellement liés à la question:

Comment puis-je ajouter des attributs pour les éléments existants de HTML en caractères d'imprimerie/JSX?

OriginalL'auteur yuval.bl

Vous devez vous connecter pour publier un commentaire.