Переключатель языкаact-intl не обновляет сообщение Formatted в компоненте grand-child - PullRequest
Новая
       24

Переключатель языкаact-intl не обновляет сообщение Formatted в компоненте grand-child

0 голосов
/ 19 июня 2019

Итак, я начал использовать response-intl в более старом реактивном проекте (не судите, пожалуйста).

В index.js я меняю состояние на выбранный язык: 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router, Route
} from 'react-router-dom';
import * as serviceWorker from './serviceWorker';

// Data
import Landing from "./components/landing/landing";
import Login from './components/app/auth/login/Login';
import Register from './components/app/auth/register/Register';
import intlEN from 'react-intl/locale-data/en';
import intlDE from 'react-intl/locale-data/de';

import { IntlProvider, addLocaleData } from "react-intl";
import messages_en from "./translations/en.json";
import messages_de from "./translations/de.json";

addLocaleData([...intlEN, ...intlDE]);

let i18nConfig = {
    locale: 'EN',
    messages: messages_en
};

// App
class Root extends Component {
    constructor(props) {
        super(props);
        this.state = { locale: "EN" }
        this.onChangeLanguage = this.onChangeLanguage.bind(this);
    }

    onChangeLanguage(lang) {
        switch (lang) {
            case 'DE': i18nConfig.messages = messages_de; break;
            case 'EN': i18nConfig.messages = messages_en; break;
            default: i18nConfig.messages = messages_en; break;
        }
        this.setState({ locale: lang });
        i18nConfig.locale = lang;
    }

    render() {
        return (
            <Router>
                <Route exact path="/" onChangeLanguage={this.onChangeLanguage} component={Landing} />
                <Route path="/login" onChangeLanguage={this.onChangeLanguage} component={Login} />
                <Route path="/register" render={() => <Register onChangeLanguage={this.onChangeLanguage} />} />
            </Router>
        )
    }
}


ReactDOM.render(
    <IntlProvider locale={i18nConfig.locale} key={i18nConfig.locale} messages={i18nConfig.messages}>
        <Root />
    </IntlProvider>,
    document.querySelector("#root")
)

Итак, в компоненте Register я предоставляю отформатированное сообщение с функцией изменения языка: 

import React, { Component, ProtoTypes } from 'react';
import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';

class Register extends Component {
    render() {
        const { onChangeLanguage } = this.props

        return (
            <div className="container d-flex vh-100 flex-column">
                <button className="btn btn-link" onClick={(param) => onChangeLanguage('EN')}>
                    English
                </button>
                <button className="btn btn-link" onClick={(param) => onChangeLanguage('DE')}>
                    German
                </button>

                <FormattedMessage id="landing.hero.title"></FormattedMessage>
            </div>
        )
    }
}

export default Register

Проблема, к сожалению, в том, что она ничего не обновляет,форматированное сообщение возвращает только выбранное в начале страницы

...