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}`)
    }
  })
})

React app中的firebaseui本地化

1 个答案: