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 实现，我将在此处为您提供伪代码和关键思想：

i18nActions

  • loadLanguage(language, route)- 如果给定路由的语言尚未加载，则会触发查询，然后将结果委托给商店。
  • 如果需要，您可以在此处 ( ) 实现缓存层localStorage。但是，您需要小心失效。您应该有某种方式来判断数据已经过时并且需要刷新。

i18nStore

  • 保持对用户可见的 i18n 状态。您将从您的 UI 级别组件中使用此状态。

根

  • 触发更新商店loadLanguage。onEnter
  • 消耗存储并将数据传递给IntlProvider. 其他组件可以从该上下文中挖掘 i18n 数据。

还有其他问题，例如在加载翻译时要做什么。那你应该展示什么？您可以推迟向用户显示 UI，也可以使用在收到数据后将被替换的占位符。

于 2016-04-11T05:41:23.810 回答