我是reactJS和使用多语言支持的新手。我想得到
来自标题下拉列表的语言环境变量（默认情况下，＆＃39;英语＆＃39;如果用户选择＆＃39;西班牙语＆＃39;。我想将整个网站内容重新呈现为西班牙语.I将消息配置为英语/西班牙语，您将在导入中看到它。我很困惑在哪里获得动态Locale变量。我也没有使用redux / flux架构。
以下代码
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import {addLocaleData,IntlProvider } from "react-intl";
import en from "react-intl/locale-data/en";
import es from "react-intl/locale-data/es";
import registerServiceWorker from "./registerServiceWorker";
import messages from "./components/messages/messages"
import {flattenMessages} from "./components/utils/utils";
addLocaleData([...en,...es]);
let locale = (navigator.languages && navigator.languages[0])
|| navigator.language
|| navigator.userLanguage
|| 'en-us';
ReactDOM.render(
<IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
<App />
</IntlProvider>,
document.getElementById('root')
);
registerServiceWorker();
import React, {Component} from "react";
import {Navbar, Nav, NavItem, MenuItem, NavDropdown} from "react-bootstrap";
import {IndexLinkContainer} from "react-router-bootstrap";
import {Icon,Image,Dropdown} from "semantic-ui-react";
import injectTapEventPlugin from "react-tap-event-plugin";
import Auth from "../modules/Auth";
import {Redirect} from "react-router-dom";
import AuthService from "../service/AuthService";
import Logo from "../../Assets/images/instapassLogo.png"
import {Link} from "react-router-dom";
import {FormattedMessage} from 'react-intl';
let languageOptions = [ { key: 'en-us', text: 'English', value: 'en-us' }, { key: 'en-es', text: 'Español', value: 'en-es' }];
/* Define your default translations */
let i18nConfig = {
locale: 'en-us'
};
class Header extends Component {
constructor(props) {
super(props);
injectTapEventPlugin();
this.state = { show: false, redirect:false,user: Auth.getUser(),uri:null};
this.logout = this.logout.bind(this);
this.setLanguage = this.setLanguage.bind(this);
}
componentDidMount() {
let userObj = JSON.parse(Auth.getToken());
const self = this;
if(userObj !== null){
AuthService.viewProfile(userObj.token).then(function(response){
self.setState({
uri: response.uri,
});
}).catch(function (error) {
alert(error);
});
}
}
onChangeLanguage =(e, { value }) => {
this.setState({ locale: value });
i18nConfig.locale = this.state.locale;
};
logout = () => {
const self = this;
const location = {
pathname: '/',
state: { from: {pathname: '/'} }
};
Auth.deauthenticateUser();
self.setState({ redirect: true});
// change the current URL to /
self.props.history.replace(location);
};
render() {
let user = Auth.getUser() && JSON.parse(Auth.getUser());
let uri = this.state.uri;
const { from } = { from: { pathname: '/' }};
const { redirect } = this.state;
if (redirect) {
return (
<Redirect to={from}/>
)
}
return (
<IntlProvider key={ i18nConfig.locale } locale={ i18nConfig.locale } {flattenMessages(messages[locale])}>
<Navbar collapseOnSelect fixedTop fluid>
<Navbar.Header>
<Link to="/">
<Navbar.Brand>
<img src={Logo} alt="logo" style={{width: 164, height: 50}}
className="img-responsive"/>
</Navbar.Brand>
</Link>
<Navbar.Toggle/>
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<IndexLinkContainer to="/">
<NavItem eventKey={1}>
<span className="navItem">
<FormattedMessage id="menu.home"/>
</span>
</NavItem>
</IndexLinkContainer>
{Auth.isUserAuthenticated() ? (
<IndexLinkContainer to="/profile">
<NavItem eventKey={2}>
<span className="navItem">
<FormattedMessage id="menu.profile"/>
</span>
</NavItem>
</IndexLinkContainer>) : ''}
<IndexLinkContainer to="/location">
<NavItem eventKey={3}>
<span className="navItem">
<FormattedMessage id="menu.locations"/>
</span>
</NavItem>
</IndexLinkContainer>
<IndexLinkContainer to="/wallet">
<NavItem eventKey={4}>
<span className="navItem">
<FormattedMessage id="menu.wallet"/>
</span>
</NavItem>
</IndexLinkContainer>
{Auth.isUserAuthenticated() ? (
<IndexLinkContainer to="/ticket">
<NavItem eventKey={5}>
<span className="navItem">
<FormattedMessage id="menu.myTickets"/>
</span>
</NavItem>
</IndexLinkContainer>) : ''}
{/*<IndexLinkContainer to="/favorites">*/}
{/*<NavItem eventKey={6}>*/}
{/*<span className="navItem">
<FormattedMessage id="menu.favorites"/>
</span>*/}
{/*</NavItem>*/}
{/*</IndexLinkContainer>*/}
<IndexLinkContainer to="/help">
<NavItem eventKey={7}>
<span className="navItem">
<FormattedMessage id="menu.help"/>
</span>
</NavItem>
</IndexLinkContainer>
<IndexLinkContainer to="/contact">
<NavItem eventKey={8}>
<span className="navItem">
<FormattedMessage id="menu.contactUs"/>
</span>
</NavItem>
</IndexLinkContainer>
<IndexLinkContainer to="/terms">
<NavItem eventKey={9}>
<span className="navItem">
<FormattedMessage id="menu.terms"/>
</span>
</NavItem>
</IndexLinkContainer>
</Nav>
<Nav pullRight>
<NavItem>
<Dropdown floating inline options={languageOptions} defaultValue='en-us' onChange={this.onChangeLanguage}/>
</NavItem>
</Nav>
<Nav pullRight>
<NavDropdown eventKey={10}
title={
<div className="pull-left">
{
user ?
(<span className="mui--bg-color-black">
{ uri ? <Image src={uri} avatar /> :<Icon name='user'/>}
<FormattedMessage id="auth.hello"/> {user && user.firstName}
</span>) :
<span className="mui--bg-color-black"><Icon name='user'/>
<FormattedMessage id="auth.hello"/>
</span>
}
</div>
}
id="basic-nav-dropdown">
{Auth.isUserAuthenticated() ? (
<span className="mui--text-center">
<MenuItem eventKey={13} href="/profile"><Icon name='setting'/>
<b><FormattedMessage id="auth.account"/></b></MenuItem>
<MenuItem divider/>
<MenuItem eventKey={12} href="/" onClick={() => this.logout()}>
<Icon name='sign out'/>
<b>
<FormattedMessage id="auth.signOut"/>
</b>
</MenuItem>
</span>
) : (
<span className="mui--text-center">
<MenuItem eventKey={11} href="/signup">
<b>
<FormattedMessage id="auth.register"/>
</b>
</MenuItem>
<MenuItem divider/>
<MenuItem eventKey={14} href="/login">
<b> <FormattedMessage id="auth.signIn"/></b>
</MenuItem>
</span>
)}
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default Header;
请您提供一些提示，了解如何通过将语言下拉菜单更改为＆＃34;西班牙语＆＃34;以及如何重新整理整个网站内容。反之亦然。（我不使用redux / flux）。