0

ルートが変更されたときに、ページの翻訳を動的にロードします。ルートごとに onEnter を使用して実行しました。

これを実装するより良い方法はありますか？ルートごとに onEnter コールバック関数を使用しないようにすることはできますか?

var  Root = React.createClass({       
    baseTranslations : {},

    getInitialState: function(){    
        return {
            lang: 'it',
            translations: null,
        };    
    },    

    componentWillMount: function() {    
        // load the common translation for all routes            
        this.setState({
            lang: this.getLocale().lang
        }); 
        this.loadTranslation("base");
    },

    onChangeRoute: function(nextState, replace){
        // load the specific route's translation
        this.loadTranslation(nextState.location.pathname);
    },

    getLocale: function(what){
        // return lang and user region (ex: it-IT)    
    },

    loadTranslation: function(route){    
        var lcl = route;    
        var mapping = {
            '/'     : 'home',
            'auth'  : 'dashboard'
        };

        if(route in mapping){
            lcl = mapping[route];
        }

        $.ajax({
            url: './locales/' + this.state.lang +'/' + lcl + '.json',
            dataType: "text",
        }).done(function(res) {

            if(lcl === "base"){
                this.baseTranslations = JSON.parse(res);
            }

            this.setState({
                translations: $.extend(true, this.baseTranslations, JSON.parse(res))
            });

        }.bind(this));

    },

    render: function() {
        var children;

        if (this.state.translations) {
            children = (
                <IntlProvider locale={this.state.lang} messages={this.state.translations}>
                    <Router history={browserHistory}>
                        <Route path="/" component={App}>
                            <IndexRoute component={Home}/>

                            <Route path="signup"  onEnter={this.onChangeRoute} getComponents={(location, cb) => {

                                 require.ensure([], (require) => {
                                        cb(null, require('./components/Signup.jsx'))
                                 }, "Signup")

                            }} />     

                            <Route path="*" component={NoMatch}/>
                        </Route>
                    </Router>
                </IntlProvider>
            );
        }

        return <div>{children}</div>;
    }
});


ReactDOM.render(
    <Root/>,
    document.getElementById('rct-cont')
);
4

1 に答える 1

0

どの Flux 実装を使用するかを判断するのは難しいため、代わりに疑似コードと重要なアイデアを以下に示します。

i18nアクション

  • loadLanguage(language, route)- 指定されたルートの言語が読み込まれていない場合、クエリがトリガーされ、結果がストアに委任されます。
  • 必要に応じて、ここ ( ) にキャッシュ レイヤーを実装できlocalStorageます。ただし、無効化には注意が必要です。データが古くなり、更新する必要があることを伝える何らかの方法が必要です。

i18nストア

  • ユーザーに見える i18n 状態を維持します。UI レベル コンポーネントからこの状態を使用します。

根

  • でトリガーloadLanguageしonEnterて、ストアを更新します。
  • ストアを消費し、データを に渡しますIntlProvider。他のコンポーネントは、そのコンテキストから i18n データを掘り出すことができます。

翻訳の読み込み中に何をすべきかなど、追加の質問があります。じゃあ何を見せればいいの？ユーザーへの UI の表示を延期するか、データの受信後に置き換えられるプレースホルダーを使用することができます。

于 2016-04-11T05:41:23.810 に答える