React-intl, utiliser api avec Typescript

Question

Je voudrais utiliser la fonction formatMessage de l'API react-intl pour insérer un message comme espace réservé, mais je n'arrive pas à trouver le bon moyen d'accéder à cette fonction.

Voici une version simplifiée de ce que j'ai:

//index.tsx 
<IntlProvider locale={`fr-FR`} messages={messages_fr}> 
    <NameForm/> 
</IntlProvider>, 

//nameForm.tsx 
interface NameFormProps { 
    intl?: InjectedIntlProps, 
} 

export default injectIntl(NameForm); 

class NameForm extends React.Component<NameFormProps, {}> { 

render() { 
    let namePlaceholder = this.props.intl.formatMessage(
     {id: "NAME_PLACEHOLDER", 
     defaultMessage: "name" 
    }); 

    return (
     <form> 
      <input placeholder={namePlaceholder} type="text"/> 
     </form> 
    ); 
} 

je InjectedIntlProps que le type de l'hélice intl, parce IntlShape n'a pas semble offrir une méthode de formatMessage.

J'ai ajouté un? au intl prop parce que j'ai gardé une "propriété 'intl' est manquante" (mais injectIntl ​​n'est pas censé retourner un composant sans ce prop?)

Maintenant, il compile, mais en cours d'exécution, je reçois une erreur (" Impossible de lire la propriété 'displayName' de undefined "Je suppose que l'exportation par défaut n'a pas de nom explicite).

Je pense que je ne vais pas dans la bonne direction, mais je ne trouve pas d'exemple de projet de type/response-intl.

Merci pour votre aide!

Answer 1

Le problème était dû à la version de la définition de type. Lorsque vous utilisez @ types/réagissent-intl ": "^ 2.2.0", il fonctionne comme un charme

(modifier) ​​Peu de changements nécessaires pour le faire fonctionner.

//index.tsx 
<IntlProvider locale={`fr-FR`} messages={messages_fr}> 
    <NameForm/> 
</IntlProvider>, 

//nameForm.tsx 
interface NameFormProps extends InjectedIntlProps { 
    placeholder: string, 
} 

class NameForm extends React.Component<NameFormProps, {}> { 

    render() { 
    let namePlaceholder = this.props.intl.formatMessage({ 
     id: this.props.placeholder, 
     defaultMessage: "name" 
     }); 

    return (
     <form> 
     <input placeholder={namePlaceholder} type="text"/> 
     </form> 
    ); 
} 

export default injectIntl(NameForm); 

Answer 2

Tout en travaillant avec le même problème, j'ai trouvé que ni InjectedIntlProps en tant que membre, comme mentionné dans la question, ni s'étendant à partir de lui, comme mentionné dans une autre réponse, satisfait le vérificateur de type. composant dans JSX s'attendait à ce que je fournisse une propriété intl La stratégie suivante a résolu ce problème:

interface NameFormProps { 
     // Include all custom properties here. 
    } 

    class NameForm extends React.Component<NameFormProps & InjectedIntlProps, {}> { 
     // Class body. 
    } 

    export default injectIntl(NameForm); 

Answer 3

Aucune des solutions existantes n'a fonctionné pour moi. Au lieu de cela, il était dû à injectIntl inférer les propriétés à inclure InjectedIntlProps.

Pour résoudre ce problème, je devais dire explicitement injectIntl supports que le composant enveloppé doit avoir:

interface NameFormProps { 
} 

class NameForm extends React.Component<NameFormProps & InjectedIntlProps> { 
} 

export default injectIntl<NameFormProps>(NameForm); 

S'il n'y a pas d'accessoires, il doit être légèrement modifié:

class NameForm extends React.Component<InjectedIntlProps> { 
} 

export default injectIntl<{}>(NameForm);