React-intl、TypescriptでAPIを使用する

Question

react-intl APIのformatMessage関数を使用してプレースホルダとしてメッセージを挿入したいが、この関数にアクセスする正しい方法を理解できない。ここで

は、私が持っているものの簡易版である：

//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> 
    ); 
} 

IntlShapeがFORMATMESSAGE方法を提供しているようだしなかったので、私は、国際小道具の種類としてInjectedIntlPropsを使用しました。

私は？私は "Property 'intl'が存在しないためにintl propを使用していました。（しかし、このpropを持たないコンポーネントを返すのはinjectIntl​​ではありません）

これはコンパイルされますが、未定義のプロパティ 'displayName'を読み取ることはできません "デフォルトのエクスポートには明示的な名前がないので推測します。

私は正しい方向に行かないと思っていますが、typescript/react-intlプロジェクトの例は見つかりません。

ありがとうございました！

Answer 1

この問題は、typescript定義のバージョンに起因しています。 種類@使用する場合/・インターナショナルの反応 "：『^2.2.0』、それは魔法のように動作

（編集）それを動作させるために必要ないくつかの変更：

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

をして作業中同じ問題ですが、質問に記載されているように、InjectedIntlPropsをメンバーとして含めることも、別の答えに記載されているようにそれを拡張することも、タイプチェッカーを満たしていないことが判明しました。InjectedIntlProps、 JSXのコンポーネントはintlプロパティを提供すると考えていましたが、次の戦略で解決しました：

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

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

    export default injectIntl(NameForm); 

Answer 3

いずれの既存の解決策も私には役に立たなかった。その代わりに、InjectedIntlPropsを含むようにプロパティを推測するのはinjectIntlであった。 「

class NameForm extends React.Component<InjectedIntlProps> { 
} 

export default injectIntl<{}>(NameForm);