Question

打开页面时，我会从本地存储中加载有关用户语言的信息，并且在界面中还有用于更改语言的按钮。但是，如何在不刷新JS React上的页面的情况下做到这一点，以便当我按下按钮时，语言发生变化而无需重新加载页面？

  componentWillMount() {
    let language = localStorage.getItem('language');
    this.setLanguage(language);
  }

SetLanguage方法：

  setLanguage(language) {
    i18next.init({
      lng: language,
      resources: require(`../localization/${language}.json`)
    });
    i18next.changeLanguage(language, (err, t) => {
      if (err) return console.log('something went wrong loading', err);
      t('applog'); // -> same as i18next.t
    });
  }

使用本地化的示例代码：

<span className="dataTitle">{i18next.t('welcome')}</span>

对于定位，我使用i18next库

Answer 1

您可以使用state来存储language，并需要使用onClick来更改按钮的this.setState，这将用新的{ {1}}，

language

按下按钮

constructor(props) {
    super(props)
    this.state = {
      language: '',
    }
}

changeLanguage = () => {
    localStorage.setItem('language', 'Hindi')
    let language = localStorage.getItem('language')
    console.log(language)
    this.setLanguage(language)
}

简化的Demo。

Answer 2

问题在于语言的更改是状态的外部变化。更改语言后，不会触发重新渲染。您可以使用内置的forceUpdate()方法来触发重新渲染。像这样

setLanguage(language) {
    i18next.init({
      lng: language,
      resources: require(`../localization/${language}.json`)
    });
    i18next.changeLanguage(language, (err, t) => {
      if (err) return console.log('something went wrong loading', err);
      t('applog'); // -> same as i18next.t

      this.forceUpdate();
    });
  }

如何在不使用反应来刷新页面的情况下按下时将信息保存在浏览器内存中并显示？

2 个答案: