defineMessagesメソッドによるローカライゼーションの定義方法は？

Question

コンポーネントをローカライズします。私はyahoo/react-intl libを使用しています。私はいくつかのメッセージを定義

const messages = defineMessages({ 
    greeting: { 
     id: 'app.home.greeting', 
     description: 'Message to greet the user.', 
     defaultMessage: 'Hello!' 
    }, 
    }); 

私はメッセージのローカライズテキストを定義する方法がわからないので、私は

app.js:27785[React Intl] Missing message: "app.home.greeting" for locale: "nl", using default message as fallback. 

例誰がどのように知ってい

<input type="text" {...firstName} placeholder={intl.formatMessage(messages.greeting)} /> 

を使用しての、このエラーを得ましたローカライズされたメッセージを定義する defineMessagesでこれを行うことはできないようです。 ありがとうございます。

Answer 1

defineMessagesは、babel-plugin of react-intlで動作するように設計されています。

実際には、コード内のどこかで定義されたメッセージを抽出するときに役立ちます。これは、大規模なコードベースでメッセージIDと変換を同期させて保持するのに便利です。

はしかし、あなたがdefineMessagesを使用するかどうか、あなたはまだこのような翻訳を提供する必要があります。もちろん

const translations = { 
    'en-US': { 
     'app.home.greeting': 'Hello!', 
     'app.home.color.description': 'Please choose a color', 
    }, 
    'en-GB': { 
     'app.home.greeting': 'Hello!', 
     'app.home.color.description': 'Please choose a colour', 
    }, 
    de: { 
     'app.home.greeting': 'Hallo!', 
     'app.home.color.description': 'Bitte eine Farbe auswählen', 
    } 
} 

<IntlProvider locale=”en” messages={translations.en}> 
    <FormattedMessage 
     id='app.home.color.description' 
     description='A task description to choose a color' 
     defaultMessage='Please choose a color' 
    /> 
    <input type="text" {...firstName} placeholder={intl.formatMessage(messages.greeting)} /> 
</IntlProvider> 

あなたはIntlProviderのすべてをラップする必要はありません。トップレベル/アプリコンポーネントの周りにIntlProviderを追加するだけです。