React应用程序中的firebaseui本地化

Question

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

我不知道如何更改Authentication 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？我试着用反应头盔但是

a)我不认为这会取代原来的cdn，它只是增加了一个新的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}`)
    }
  })
})