React app中的firebaseui本地化

Question

我正在尝试在我的React应用程序中本地化FirebaseUI。当用户更改语言时，将调度操作。我正在使用中间件（目前还有redux-saga，但我也有redux-thunk）。

我无法弄清楚如何更改身份验证UI以显示本地化的按钮字符串。

我首先使用的是：

var firebase = require('firebase')
var firebaseui = require('firebaseui')

从node_modules加载。

现在我知道我需要加载一个特定的本地化cdn，例如，如果我想要法语。所以我将应用程序更改为在index.html页面中链接到cdn然后使用

var firebase = window.firebase
var firebaseui = window.firebaseui
let ui = new firebaseui.auth.AuthUI(firebase.auth())

然后当他们进入登录页面时：

ui.start('#firebase-auth-container',uiconfig)

但是，当用户获得index.html时，这显然会加载特定语言。如何在SPA React应用程序中更改该cdn？我试过使用react-helmet但是

a）我不认为这取代了原来的cdn，它只是增加了一个新的

b）它对我不起作用。我试过ui.reset（），但似乎没有做任何事情。

有没有人这样做，可以告诉我应该怎么做？

谢谢

Answer 1

我一直在寻找同样的事情。它似乎they suggest to load the localized widget但我没有看到用动态语言这样做的简单方法。

这是我的解决方案灵感来自this：

setTimeout(() => {
  let providers = [{
      key: 'email',
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
    },
    {
      key: 'google',
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    },
    {
      key: 'facebook',
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    }
  ]

  providers.forEach(({
    key,
    provider
  }) => {
    let button = document.querySelector(`[data-provider-id="${provider}"] .firebaseui-idp-text-long`)
    if (button) {
      button.innerHTML = this.$t(`Sign_in_with_${key}`)
    }
  })
})