1
votes

Comment utiliser les microdonnées dans React + Typescript?

Lorsque j'ajoute itemscope itemtype = "http://schema.org/Product" à h1 , j'obtiens cette erreur:

Tapez '{children: string; itemscope: vrai; type d'élément: chaîne; }' n'est pas assignable au type 'DétailléHTMLProps , HTMLHeadingElement> '. La propriété 'itemscope' n'existe pas sur le type 'DétailléHTMLProps , HTMLHeadingElement> '

<h1 itemscope itemtype="http://schema.org/Product">Amasia</h1>

Comment utiliser les microdonnées dans React + Typescript?

reactjs typescript microdata

1 commentaires

React lui-même prend en charge cela , à partir de la version 16 . Le problème vient des définitions de TypeScript, semble-t-il.

3 Réponses :

0
votes

Pas très élégant, mais cela fonctionne:

// foo.d.ts
declare namespace React {
    interface HTMLAttributes<T> {
        itemscope?: boolean;
        itemtype?: string;
    }
}
// app.tsx
function foo(): JSX.Element {
    return (
        <h1 itemscope itemtype="http://schema.org/Product">
            Amasia
        </h1>
    );
}

Fonctionne pour moi (Typescript 3.4.5).

0 commentaires

0
votes

Si vous utilisez dactylographié, vous devez écrire comme ceci

<h1 itemScope itemType={"http://schema.org/Product"}>{...}</h1>

0 commentaires

0
votes

Pour React, il est sensible à la casse. Faites attention à: itemScope et itemType orthographe

<div itemScope itemType={"http://schema.org/Product"}>{...}</div>

0 commentaires