mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Update with-react-intl example (#4825)
Changes: - added withIntl HOC because injectIntl do no hoist static methods - fixed `Cannot read property 'locale' of undefined`
This commit is contained in:
parent
b1222962f0
commit
e2b518525c
|
@ -50,6 +50,7 @@ This example app shows how to integrate [React Intl][] with Next.
|
||||||
- `<IntlProvider>` creation with `locale`, `messages`, and `initialNow` props
|
- `<IntlProvider>` creation with `locale`, `messages`, and `initialNow` props
|
||||||
- Default message extraction via `babel-plugin-react-intl` integration
|
- Default message extraction via `babel-plugin-react-intl` integration
|
||||||
- Translation management via build script and customized Next server
|
- Translation management via build script and customized Next server
|
||||||
|
- withIntl HOC for pages because injectIntl do not hoist static methods.
|
||||||
|
|
||||||
### Translation Management
|
### Translation Management
|
||||||
|
|
||||||
|
|
11
examples/with-react-intl/lib/withIntl.js
Normal file
11
examples/with-react-intl/lib/withIntl.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import hoistNonReactStatics from 'hoist-non-react-statics'
|
||||||
|
import { injectIntl } from 'react-intl'
|
||||||
|
|
||||||
|
export const hoistStatics = (higherOrderComponent) => (BaseComponent) => {
|
||||||
|
const NewComponent = higherOrderComponent(BaseComponent)
|
||||||
|
hoistNonReactStatics(NewComponent, BaseComponent)
|
||||||
|
|
||||||
|
return NewComponent
|
||||||
|
}
|
||||||
|
|
||||||
|
export default hoistStatics(injectIntl)
|
|
@ -10,6 +10,7 @@
|
||||||
"accepts": "^1.3.3",
|
"accepts": "^1.3.3",
|
||||||
"babel-plugin-react-intl": "^2.3.1",
|
"babel-plugin-react-intl": "^2.3.1",
|
||||||
"glob": "^7.1.1",
|
"glob": "^7.1.1",
|
||||||
|
"hoist-non-react-statics": "^3.0.0-rc.1",
|
||||||
"intl": "^1.2.5",
|
"intl": "^1.2.5",
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
"react": "^16.0.0",
|
"react": "^16.0.0",
|
||||||
|
|
|
@ -30,6 +30,7 @@ export default class MyApp extends App {
|
||||||
render () {
|
render () {
|
||||||
const { Component, pageProps, locale, messages } = this.props
|
const { Component, pageProps, locale, messages } = this.props
|
||||||
const now = Date.now()
|
const now = Date.now()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
<IntlProvider locale={locale} messages={messages} initialNow={now}>
|
<IntlProvider locale={locale} messages={messages} initialNow={now}>
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import React from 'react'
|
import React, { Component } from 'react'
|
||||||
import {FormattedMessage, FormattedNumber, defineMessages, injectIntl} from 'react-intl'
|
import { FormattedMessage, FormattedNumber, defineMessages } from 'react-intl'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import Layout from '../components/Layout'
|
import Layout from '../components/Layout'
|
||||||
|
import withIntl from '../lib/withIntl'
|
||||||
|
|
||||||
const { description } = defineMessages({
|
const { description } = defineMessages({
|
||||||
description: {
|
description: {
|
||||||
|
@ -10,7 +11,15 @@ const {description} = defineMessages({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
export default injectIntl(({intl}) => (
|
class Index extends Component {
|
||||||
|
static getInitialProps () {
|
||||||
|
// Do something
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { intl } = this.props
|
||||||
|
|
||||||
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<Head>
|
<Head>
|
||||||
<meta name='description' content={intl.formatMessage(description)} />
|
<meta name='description' content={intl.formatMessage(description)} />
|
||||||
|
@ -22,4 +31,8 @@ export default injectIntl(({intl}) => (
|
||||||
<FormattedNumber value={1000} />
|
<FormattedNumber value={1000} />
|
||||||
</p>
|
</p>
|
||||||
</Layout>
|
</Layout>
|
||||||
))
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withIntl(Index)
|
||||||
|
|
Loading…
Reference in a new issue