未验证 提交 a3ffa2e6 编写于 作者: D Darsh Patel 提交者: GitHub

switch to function component with-react-intl example (#14217)

The example was using class-based component for custom _app, switched to functional component approach.


**Sidenote:** The existing code didn't gave an error when navigated to a new page using the navbar
![Screenshot 2020-06-16 at 2 47 52 PM](https://user-images.githubusercontent.com/11258286/84760988-6cbebd80-afe6-11ea-9b7f-98aca7404895.png)
上级 725376a9
import App from 'next/app'
import { createIntl, createIntlCache, RawIntlProvider } from 'react-intl'
// This is optional but highly recommended
// since it prevents memory leak
const cache = createIntlCache()
export default class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {}
function MyApp({ Component, pageProps, locale, messages }) {
const intl = createIntl(
{
locale,
messages,
},
cache
)
return (
<RawIntlProvider value={intl}>
<Component {...pageProps} />
</RawIntlProvider>
)
}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
MyApp.getInitialProps = async ({ Component, ctx }) => {
let pageProps = {}
// Get the `locale` and `messages` from the request object on the server.
// In the browser, use the same values that the server serialized.
const { req } = ctx
const { locale, messages } = req
const { req } = ctx
const locale = req?.locale ?? ''
const messages = req?.messages ?? {}
return { pageProps, locale, messages }
if (Component.getInitialProps) {
Object.assign(pageProps, await Component.getInitialProps(ctx))
}
render() {
const { Component, pageProps, locale, messages } = this.props
const intl = createIntl(
{
locale,
messages,
},
cache
)
return (
<RawIntlProvider value={intl}>
<Component {...pageProps} />
</RawIntlProvider>
)
}
return { pageProps, locale, messages }
}
export default MyApp
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册