Skip to:
Use react-intl injectIntl() directly on component class(es) to avoid creation of anonymous functions in render().
injectIntl()
render()
The following are sketches of a couple of approaches.
IntlContainer
Contains internationalization supports, messages, and current language state
App is its only child component
We can then use injectIntl() directly in App.js:
App.js
App would contain internationalization supports, messages, current language state, and other application-wide state
App
Any UI that needs localization is in child components of App
In this model, App would contain the <IntlProvider> container (as now) and children would contain:
<IntlProvider>
https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc
https://github.com/formatjs/react-intl/issues/942
Use react-intl
injectIntl()directly on component class(es) to avoid creation of anonymous functions inrender().The following are sketches of a couple of approaches.
Either a component with a name something like
IntlContainerContains internationalization supports, messages, and current language state
App is its only child component
We can then use
injectIntl()directly inApp.js:Or, move the localizable user interface out of App
Appwould contain internationalization supports, messages, current language state, and other application-wide stateAny UI that needs localization is in child components of
AppIn this model,
Appwould contain the<IntlProvider>container (as now) and children would contain:Resources
https://github.com/formatjs/react-intl/blob/master/docs/API.md#injectintl-hoc
https://github.com/formatjs/react-intl/issues/942