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

Question

我在打开页面时从本地存储加载有关用户语言的信息，并且在界面中还有用于更改语言的按钮。但是如何在JS React上不刷新页面，让我按下按钮时，语言改变而不重新加载页面？

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

设置语言方法：

  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 更改状态的按钮，这将 re-render 您的具有新 language、

的组件

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

按下按钮时，

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

setLanguage = language => {
    this.setState({language})
    //Your othe code here
}

简化Demo.

Answer 2

问题是语言的变化是国家外部的。更改语言时，不会触发 re-render。您可以使用 built-in forceUpdate() 方法触发 re-render。像这样，

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();
    });
  }

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

How to save information in the browser memory and display when pressed without refreshing the page using the react?

javascript

i18next

reactjs