Я новичок в React (но я уже сделал простое приложение с ReactNative). Я сделал простое веб-приложение с несколькими компонентами для входа пользователя. Проблема заключается в том, что он должен поддерживать многоязыковой интерфейс, и я не могу полностью понять, как использовать избыточность, чтобы изменить системный язык с дочернего компонента «Меню» на все компоненты, которые загружены или будут загружены внутри приложения.
Вот основные компоненты:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Link, Redirect } from "react-router-dom";
import Globals from './globals/globals.js';
import './assets/css/main.css';
import Menu from './components/Menu.js';
import Footer from './components/Footer.js';
import Loading from './components/Loading.js';
import Login from './pages/Login.js';
import Home from './pages/Home.js';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
language: "en",
accessToken: "",
isLogged: undefined,
}
}
componentDidMount(props) {
// Get access token if stored
let accessToken = localStorage.getItem('accessToken');
if ( accessToken !== undefined && accessToken !== null && accessToken !== '' ) {
// Try to contact the server to see if it's still viable
} else {
// Go to the login page because you're certainly not logged
localStorage.setItem( 'accessToken', "" );
this.setState({
accessToken: "",
isLogged: false,
});
}
}
render() {
let redirect;
if ( this.state.isLogged === false ) {
redirect = <Redirect to={{ pathname: '/login' }} />;
}
let pages;
if ( this.state.isLogged === undefined ) {
pages = <Loading/>;
} else {
pages = <div>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
</div>;
}
return(
<Router>
<div className="page-wrapper">
<Menu />
<div className="site-content">
{pages}
{redirect}
</div>
<Footer />
</div>
</Router>
);
}
}
Menu.js
import React, { Component } from 'react';
import logo from './../assets/img/logo.png';
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
language: "en",
menuState: 0,
}
}
toggleMenu() {
this.setState({
menuState: 1 - this.state.menuState
});
}
changeLanguage(language) {
alert('change language');
}
render() {
return(
<header>
<div className="menu-bar">
<div className="top-bar">
<div className="icon open" onClick={this.toggleMenu.bind( this )}></div>
<div className="logo-wrapper">
<img src={logo} alt="logo" />
</div>
<div className="language-selection-wrapper"></div>
</div>
<div className={this.state.menuState === 1 ? "menu-body opened" : "menu-body closed"}>
<div className="menu-sidebar">
<div className="sidebar-content">
<div className="sidebar-top-bar">
<div className="icon close" onClick={this.toggleMenu.bind( this, 1 )}></div>
<div className="logo-wrapper">
<img src={logo} alt="logo" />
</div>
</div>
<div className="language-selection-wrapper">
<div className={this.state.language === 'it' ? "language current" : "language"} onClick={this.changeLanguage.bind(this, 'it')}>IT</div>
<div className={this.state.language === 'en' ? "language current" : "language"} onClick={this.changeLanguage.bind(this, 'en')}>EN</div>
<div className={this.state.language === 'de' ? "language current" : "language"} onClick={this.changeLanguage.bind(this, 'de')}>DE</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
}
}
И в конце Login.js
import React, { Component } from 'react';
import Globals from './../globals/globals.js';
import Loading from './../components/Loading.js';
import 'font-awesome/css/font-awesome.min.css';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
language: "en",
loading: false
}
}
componentDidMount(){
document.title = "Login"
}
doLogin() {
alert('Fai il login');
this.setState({
loading: true
});
}
render() {
let loading;
if ( this.state.loading === true ) {
loading = <Loading/>;
}
return(
<div className="login-box">
<div className="welcome-message">
{Globals.messages.welcome[this.state.language]}
</div>
<div className="input-wrapper">
<input type="text" name="username" placeholder={Globals.placeholders.email[this.state.language]} />
</div>
<div className="input-wrapper">
<input type="password" name="password" placeholder={Globals.placeholders.password[this.state.language]} />
</div>
<div className="input-wrapper">
<button type="button" onClick={this.doLogin.bind(this)}><i className="fa fa-sign-in"></i><span>{Globals.placeholders.login[this.state.language]}</span></button>
</div>
{loading}
</div>
);
}
}
Я также даю файл globals.js с переводами
const Globals = {
baseUrl: "https://www.mywebsite.it/webservices/1.0/",
messages: {
welcome: {
it: "Benvenuto!",
en: "Welcome!",
de: "Willkommen!",
},
},
placeholders: {
email: {
it: "Email",
en: "Email",
de: "Email",
},
password: {
it: "Password",
en: "Password",
de: "Password",
},
login: {
it: "Login",
en: "Login",
de: "Login",
},
},
}
export default Globals;