Question

我使用ReactJS构建我的网站，并且我已经开始使用语言进行切换。我正在切换英语和法语而不重新加载页面，只是安装了一组新的reactjs组件。

我的一个组件上有一个Facebook LIKE按钮，但因为facebook-jssdk的加载与组件结构无关，所以它被锁定在首先加载的语言中。

有没有办法让我在不重新加载页面的情况下更改加载的facebook-jssdk的语言？

Answer 1

@trekforever：在我看到你的评论之前，我昨晚真的这样做了！

这是我的最终解决方案：

componentWillMount: function(){
    // check for a fb-like button and remove it
    // if it exists!
    if( window.FB ) {
        // remove all instances of facebook and elements
        $("#facebook-jssdk, #fb-root").remove()
        delete window.FB
    }

    // we need to use this method to let facebook-jssdk
    // know it needs to parse the xfbml after it loads
    // into our page
    window.fbAsyncInit = function() {
        window.FB.init({
            xfbml      : true,
            version    : 'v2.0'
        });
    };

    // we don't have to go through all the checks and balances that
    // come in the fb jssdk init code by default, we just got rid of them
    var fjs = document.getElementsByTagName('script')[0],
        js = document.createElement('script')
        js.id = 'facebook-jssdk'
        js.src = '//connect.facebook.net/en_US/sdk.js'
    fjs.parentNode.insertBefore(js, fjs)
}

我的第二语言是fr_CA所以我只是替换了这一行：

js.src = '//connect.facebook.net/en_US/sdk.js'

用这个：

js.src = '//connect.facebook.net/fr_CA/sdk.js'

现在我可以用任何（或任何）语言重新渲染组件，它也会以正确的语言显示Facebook Like按钮！

出于利益的考虑，这是同样的事情，但Google的Recaptcha：

componentWillMount: function(){
    // this is stolen directly from the facebook-jssdk
    // implementation...
    if( window.grecaptcha ){
        $("#grecaptcha-jssdk").remove()
        delete window.grecaptcha
    }

    var gjs = document.getElementsByTagName('script')[0],
        js = document.createElement('script')
    js.id = 'grecpatcha-jssdk'
    js.src = 'https://www.google.com/recaptcha/api.js?hl=fr-CA'
    gjs.parentNode.insertBefore(js, gjs)
}

默认情况下，它未命名为grecaptcha-jssdk，我只是选择坚持使用该名称以保持一致。

快乐的i18n！

在没有重新加载页面的情况下更改facebook的按钮语

1 个答案: