Я следовал руководству .. это мое приложение. js и мой индекс. js
Индекс. js
import { withTranslation } from '../i18n'
class Index extends React.Component {
static async getInitialProps (params) {
const { store, isServer, req, query } = params;
if (isServer) {
await store.dispatch(restoreStatus(req));
await store.dispatch(restoreBasicSettings(req));
await store.dispatch(restoreSNMPSettings(req));
await store.dispatch(restoreSIPSettings(req));
await store.dispatch(restoreHardwareSettings(req));
await store.dispatch(restoreAdvancedSettings(req));
}
}
render () {
return (
<Layout>
<MainPage />
</Layout>
)
}
}
_app. js
export default withTranslation('common')(Index)
import React from 'react'
import { Provider } from "react-redux";
import App, { Container } from "next/app";
import withRedux from "next-redux-wrapper";
import { initStore } from '../statemanagement/store'
import '../styles/index.css'
import { appWithTranslation } from '../i18n'
export default withRedux(initStore, {debug: false})(appWithTranslation(class MyApp extends App {
static async getInitialProps({Component, ctx}) {
return {
pageProps: {
// Call page-level getInitialProps
...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
}
};
}
render() {
const {Component, pageProps, store} = this.props;
return (
<Container>
<Provider store={store}>
<Component {...pageProps} />
</Provider>
</Container>
);
}
}));
Затем у меня есть компонент меню, который загружает страницу настроек с различными меню.
import { withTranslation } from '../../../i18n'
class SettingsView extends PureComponent {
constructor(props) {
super(props);
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
this._menu = [
{
title: this.props.t('menu_status'), // Title that is displayed as text in the menu
url: "/status", // Identifier (url-slug)
footerVisible: false
},
{
title: this.props.t('menu_basic'),
url: "/settings/basicSettings",
footerVisible: true
},
{
title: this.props.t('menu_snmp'),
url: "/settings/snmpSettings",
footerVisible: true
},
{
title: this.props.t('menu_sip'),
url: "/settings/sipSettings",
footerVisible: true
},
{
title: this.props.t('menu_hardware'),
url: "/settings/hardwareSettings",
footerVisible: true
},
{
title: this.props.t('menu_advanced'),
url: "/settings/advancedSettings",
footerVisible: true
}
];
// Return your Settings Pane
return (
<SettingsPane items={this._menu} index="/status" >
<SettingsMenu headline="Intercom" />
<SettingsSingleContent header={true}>
<SettingsPage handler="/status" >
<StatusSettingsForm/>
</SettingsPage>
<SettingsPage handler="/settings/basicSettings">
<BasicSettingsForm />
</SettingsPage>
<SettingsPage handler="/settings/snmpSettings">
<SNMPSettingsForm />
</SettingsPage>
<SettingsPage handler="/settings/sipSettings">
<SIPSettingsForm />
</SettingsPage>
<SettingsPage handler="/settings/hardwareSettings">
<HardwareSettingsForm />
</SettingsPage>
<SettingsPage handler="/settings/advancedSettings" >
<AdvancedSettingsForm />
</SettingsPage>
</SettingsSingleContent>
</SettingsPane>
)
}
}
export default withTranslation()(SettingsView)
Я не знаю, как сделать это, чтобы это изменялось динамически, поскольку это меню только повторно отображает при загрузке страницы (location.reload()
).
Затем в одной из настроек формы у меня есть селектор языка.
function submit(values, dispatch) {
i18n.changeLanguage(values.language == "spanish" ? "es": "en")
return dispatch(setAdvancedSetting(values));
}
Итак, когда я изменил язык, каждая метка страницы изменится на правильный язык (только те, которые относятся к меню, не меняются (поскольку у него есть проблема с перезагрузкой меню)).
Итак, если я попытаюсь перезагрузить страницу с изменениями языка, я не знаю, почему но страница перерисовывается с языком по умолчанию. Может быть, что-то с начальными реквизитами, которые я не полностью понимаю, или другой вариант ...
Итак, я борюсь с двумя проблемами:
Как лучше разработать меню для меняется с изменением языка. Я думаю о динамических c языковых клавишах .. например.
this.props.t('menu_basic_settings) generate Basic Settings
но это возможно ??
this.props.t({this.props.header})
Я имею в виду использование внешних свойств?
При перезагрузке окна страница переключается на язык по умолчанию