Javascript 使用react js的多语言站点_Javascript_Reactjs

Javascript 使用react js的多语言站点

javascript reactjs

Javascript 使用react js的多语言站点,javascript,reactjs,Javascript,Reactjs,我正在尝试使用ReactJS创建一个多语言站点。我的主要JS组件如下所示： var React = require('react'); var Header = require('../common/header'); var HeaderCompact = require('../common/headerCompact'); var Footer = require('../common/footer'); var App = React.createClass({ ge

我正在尝试使用ReactJS创建一个多语言站点。我的主要JS组件如下所示：

    var React = require('react');
var Header = require('../common/header');
var HeaderCompact = require('../common/headerCompact');
var Footer = require('../common/footer');


var App = React.createClass({
    getInitialState: function(){
        return {
            lang: 1
        };
    },

    changeLang: function(name, event){

        switch (name){
            case "fra" :
                this.setState({lang: 2});
                break;
            case "ger" :
                this.setState({lang: 3});
                break;
            case "ned" :
                this.setState({lang: 4});
                break;
            default:
                this.setState({lang: 1});
        }
    },
    render: function () {
        var currentRoute = this.props.location.pathname.slice(1);
        var header = currentRoute === "" ? <Header onClick={this.changeLang} lang={this.state.lang}/> : <HeaderCompact currentRoute={currentRoute} onClick={this.changeLang} lang={this.state.lang}/>;
        return (
            <div>
                {header}
                {this.props.children}
                <Footer lang={this.state.lang}/>
            </div>

        );
    }
});

module.exports = App;

    'use strict';

var React = require('react');
var Link = require('react-router').Link;
var FontAwesome = require('react-fontawesome');

var Header = React.createClass({


    render: function () {
        var lang = this.props.lang;
        console.log("State je : " + lang);
        var language = "";
        switch (lang){
            case 1 :
                language = require('./en');
                var hideEng = "hideEng";
                break;
            case 2 :
                language = require('./fr');
                var hideFra = "hideFra";
                break;
            case 3 :
                language = require('./de');
                var hideGer = "hideGer";
                break;
            default:
                language = require('./nl');
                var hideNed = "hideNed";
        }
        return (
            <div>
                <div id="sub-header">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-6 col-md-6 col-sm-6 col-xs-12 headerLogo noPadding">
                                <Link to="/">
                                    <img src="../images/logos/logo-header-compact.png" style={{paddingTop: 10}}/>
                                </Link>
                            </div>
                            <div className="col-lg-6 col-md-6 col-sm-6 col-xs-12 noPadding">
                                <ul className="langAndBtn">
                                    <li className="col-lg-3 col-md-3 col-sm-3 col-xs-12" style={{paddingTop: 20}}>
                                        <Link to="/" className={hideNed} style={{marginRight: 5}} onClick={this.props.onClick.bind(this, 'ned')}><img src="../images/languages/nl.png" /></Link>
                                        <Link to="/" className={hideEng} style={{marginRight: 5}} onClick={this.props.onClick.bind(this, 'eng')}><img src="../images/languages/gb.png" /></Link>
                                        <Link to="/" className={hideFra} style={{marginRight: 5}} onClick={this.props.onClick.bind(this, 'fra')}><img src="../images/languages/fr.png" /></Link>
                                        <Link to="/" className={hideGer} onClick={this.props.onClick.bind(this, 'ger')}><img src="../images/languages/ger.png" /></Link>
                                    </li>
                                    <li className="col-lg-9 col-md-9 col-sm-9 col-xs-12 text-center">
                                        <div className="advanced-button text-center" style={{width: 215, margin: '0 auto'}}>
                                            <Link to="registration" className="btnRegistrationHeader text-center" title="">
                                                <span className="regHeaderText">{language.homePage.registrationButton}</span>
                                                <FontAwesome name="user" className="faIcon" style={{borderLeft: '1px solid #a0acb8', borderTop: '1px solid #a0acb8', borderBottom: '1px solid #a0acb8'}}/>
                                            </Link>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div className="clearfix"></div>
                        </div>
                    </div>
                </div>

                <div className="container pageTitle" style={{margin: '30px auto 0 !important', textAlign: 'center !important'}}>
                    <div className="homeTitle">{language.homePage.title}</div>
                    <div className="homeSubtitle">{language.homePage.subtitle}</div>
                </div>
            </div>
        );
    }
});

module.exports = Header;

var React=require（'React'）；
var Header=require（'../common/Header'）；
var HeaderCompact=require（“../common/HeaderCompact”）；
var Footer=require（'../common/Footer'）；
var App=React.createClass({
getInitialState:函数（）{
返回{
朗：1
};
},
changeLang:函数（名称、事件）{
交换机（名称）{
案例“fra”：
this.setState（{lang:2}）；
打破
案例“ger”：
this.setState（{lang:3}）；
打破
“ned”案：
this.setState（{lang:4}）；
打破
违约：
this.setState（{lang:1}）；
}
},
渲染：函数（）{
var currentRoute=this.props.location.pathname.slice（1）；
var header=currentRoute==“”？：；
返回(
{header}
{this.props.children}
);
}
});
module.exports=App；

我的标题组件如下所示：

    var React = require('react');
var Header = require('../common/header');
var HeaderCompact = require('../common/headerCompact');
var Footer = require('../common/footer');


var App = React.createClass({
    getInitialState: function(){
        return {
            lang: 1
        };
    },

    changeLang: function(name, event){

        switch (name){
            case "fra" :
                this.setState({lang: 2});
                break;
            case "ger" :
                this.setState({lang: 3});
                break;
            case "ned" :
                this.setState({lang: 4});
                break;
            default:
                this.setState({lang: 1});
        }
    },
    render: function () {
        var currentRoute = this.props.location.pathname.slice(1);
        var header = currentRoute === "" ? <Header onClick={this.changeLang} lang={this.state.lang}/> : <HeaderCompact currentRoute={currentRoute} onClick={this.changeLang} lang={this.state.lang}/>;
        return (
            <div>
                {header}
                {this.props.children}
                <Footer lang={this.state.lang}/>
            </div>

        );
    }
});

module.exports = App;

    'use strict';

var React = require('react');
var Link = require('react-router').Link;
var FontAwesome = require('react-fontawesome');

var Header = React.createClass({


    render: function () {
        var lang = this.props.lang;
        console.log("State je : " + lang);
        var language = "";
        switch (lang){
            case 1 :
                language = require('./en');
                var hideEng = "hideEng";
                break;
            case 2 :
                language = require('./fr');
                var hideFra = "hideFra";
                break;
            case 3 :
                language = require('./de');
                var hideGer = "hideGer";
                break;
            default:
                language = require('./nl');
                var hideNed = "hideNed";
        }
        return (
            <div>
                <div id="sub-header">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-6 col-md-6 col-sm-6 col-xs-12 headerLogo noPadding">
                                <Link to="/">
                                    <img src="../images/logos/logo-header-compact.png" style={{paddingTop: 10}}/>
                                </Link>
                            </div>
                            <div className="col-lg-6 col-md-6 col-sm-6 col-xs-12 noPadding">
                                <ul className="langAndBtn">
                                    <li className="col-lg-3 col-md-3 col-sm-3 col-xs-12" style={{paddingTop: 20}}>
                                        <Link to="/" className={hideNed} style={{marginRight: 5}} onClick={this.props.onClick.bind(this, 'ned')}><img src="../images/languages/nl.png" /></Link>
                                        <Link to="/" className={hideEng} style={{marginRight: 5}} onClick={this.props.onClick.bind(this, 'eng')}><img src="../images/languages/gb.png" /></Link>
                                        <Link to="/" className={hideFra} style={{marginRight: 5}} onClick={this.props.onClick.bind(this, 'fra')}><img src="../images/languages/fr.png" /></Link>
                                        <Link to="/" className={hideGer} onClick={this.props.onClick.bind(this, 'ger')}><img src="../images/languages/ger.png" /></Link>
                                    </li>
                                    <li className="col-lg-9 col-md-9 col-sm-9 col-xs-12 text-center">
                                        <div className="advanced-button text-center" style={{width: 215, margin: '0 auto'}}>
                                            <Link to="registration" className="btnRegistrationHeader text-center" title="">
                                                <span className="regHeaderText">{language.homePage.registrationButton}</span>
                                                <FontAwesome name="user" className="faIcon" style={{borderLeft: '1px solid #a0acb8', borderTop: '1px solid #a0acb8', borderBottom: '1px solid #a0acb8'}}/>
                                            </Link>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div className="clearfix"></div>
                        </div>
                    </div>
                </div>

                <div className="container pageTitle" style={{margin: '30px auto 0 !important', textAlign: 'center !important'}}>
                    <div className="homeTitle">{language.homePage.title}</div>
                    <div className="homeSubtitle">{language.homePage.subtitle}</div>
                </div>
            </div>
        );
    }
});

module.exports = Header;

“严格使用”；
var React=要求（'React'）；
var Link=require（'react-router'）。Link；
var FontAwesome=require（'react-FontAwesome'）；
var Header=React.createClass({
渲染：函数（）{
var lang=this.props.lang；
控制台日志（“状态je:+lang”）；
var language=“”；
交换机（lang）{
案例1：
语言=要求（'./en'）；
var hideEng=“hideEng”；
打破
案例2：
语言=要求（'./fr'）；
var hideFra=“hideFra”；
打破
案例3：
语言=要求（'./de'）；
var hideGer=“hideGer”；
打破
违约：
语言=要求（'./nl'）；
var hideNed=“hideNed”；
}
返回(




{语言.主页.注册按钮}


{语言.主页.标题}
{语言.主页.字幕}
);
}
});
module.exports=标题；

这是毫无问题的。但这样，翻译只适用于页眉和页脚。如何将lang={this.state.lang}传递到我的应用程序组件的呈现方法中的路由器（this.props.children），以便我也可以在主页上进行翻译？

这就是为什么我们需要一些库，如

redux

和

flux

，管理这些状态是可行的，但很麻烦。你可以检查这个项目。您也可以使用react上下文来解决这个问题，我个人更喜欢在rails项目中使用i18nJS来避免react。我看了一下react intl，它看起来像是一种非常有参考价值的方法。