1

我已经按照教程.. 这是我的 app.js 和我的 index.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));
}

因此，当我更改语言时，页面的每个标签都会更改为正确的语言（只有与 Menu 相关的标签不会更改（因为它有重新加载菜单的问题））。

因此，如果我尝试用语言更改重新加载页面，我不知道为什么，但页面会使用默认语言重新呈现。可能有一些我不完全理解的初始道具或其他选项......

所以我正在努力解决两个问题：

  1. 如何更好地设计菜单以随着语言的变化而变化。我考虑动态语言键..例如。

     this.props.t('menu_basic_settings) generate Basic Settings

    但这是可能的？？

     this.props.t({this.props.header})

    我的意思是使用外部道具？

  2. 重新加载窗口时页面切换到默认语言

4

0 回答 0