React intl 在开发过程中是否可以实时重新加载和响应intl消息

在开发过程中是否可以实时重新加载响应intl消息（对于默认语言）

我的意思是，就像热模块加载一样，只有更新的消息才会受到影响。任何没有运行额外脚本或刷新整个页面的ohter解决方案也可以

---

谢谢。

您可以

module.hot。接受
您的翻译的消息并将其作为参数呈现。请参见中的示例


const render=（消息）=>{
ReactDOM.render(
,
挂载节点
);
};
如果（模块热）{
//可热重新加载的React组件和转换json文件
//modules.hot.accept不接受动态依赖项，
//在编译时必须是常量
module.hot.accept（['./i18n'，containers/App']，（）=>{
ReactDOM.unmountComponentAtNode（MOUNT_节点）；
呈现（翻译消息）；
});
}
您可以
module.hot.接受您翻译的消息并将其作为参数呈现。请参见中的示例


const render=（消息）=>{
ReactDOM.render(
,
挂载节点
);
};
如果（模块热）{
//可热重新加载的React组件和转换json文件
//modules.hot.accept不接受动态依赖项，
//在编译时必须是常量
module.hot.accept（['./i18n'，containers/App']，（）=>{
ReactDOM.unmountComponentAtNode（MOUNT_节点）；
呈现（翻译消息）；
});
}
如果有人需要它，我为此编写了HOC

import React, {Component} from "react";
import {IntlProvider} from "react-intl";

const url = location.protocol + '//' + location.host + "/";

class IntlLoader extends Component {
    constructor(props) {
        super(props);
        const {initialLocale: locale, initialMessages: messages} = props;
        this.state = {locale: 'en', messages};
    }

    fetchLanguagesForDevelopment = () => {
        // if development, use hot loading
        if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
            this.setState({...this.state, loading: true})
            fetch(url + "reactIntlMessages.json")
                .then((res) => {
                    return res.json();
                })
                .then((messages) => {
                    this.setState({loading: false})
                    if (messages !== this.state.messages)
                        this.setState({...this.state, messages})
                })
                .catch((error) => {
                    this.setState({error, loading: false})
                })
        } else {
            const messages = require('../../dist/reactIntlMessages.json')
            if (this.state.messages !== messages)
                this.setState({...this.state, messages, loading: false})
        }
    }

    componentDidMount() {
        this.fetchLanguagesForDevelopment()
    }


    componentWillReceiveProps(nextProps) {
        this.fetchLanguagesForDevelopment()
    }

    render() {
        const {error, messages, loading} = this.state;
        //if (loading) return (<div>Please wait...</div>)
        if (error) return (<div>Error While Loading Language</div>)

        return (
            <IntlProvider {...this.state}>
                {this.props.children}
            </IntlProvider>
        );
    }
}

export default IntlLoader

import React，{Component}来自“React”；
从“react intl”导入{IntlProvider}；
常量url=location.protocol+'/'+location.host+“/”；
类IntlLoader扩展组件{
建造师（道具）{
超级（道具）；
const{initialLocale:locale，initialMessages:messages}=props；
this.state={locale:'en'，messages}；
}
fetchLanguagesForDevelopment=（）=>{
//如果需要开发，请使用热加载
如果（！process.env.NODE|env | process.env.NODE_env==='development'）{
this.setState（{…this.state，加载：true}）
获取（url+“reactIntlMessages.json”）
。然后（（res）=>{
返回res.json（）；
})
。然后（（消息）=>{
this.setState（{loading:false}）
if（messages！==this.state.messages）
this.setState（{…this.state，messages}）
})
.catch（（错误）=>{
this.setState（{error，loading:false}）
})
}否则{
const messages=require（“../../dist/reactIntlMessages.json”）
if（this.state.messages！==消息）
this.setState（{…this.state，消息，加载：false}）
}
}
componentDidMount（）{
this.fetchLanguagesForDevelopment（）文件
}
组件将接收道具（下一步）{
this.fetchLanguagesForDevelopment（）文件
}
render（）{
const{error，messages，loading}=this.state；
//如果（正在加载）返回（请稍候…）
if（error）返回（加载语言时出错）
返回(
{this.props.children}
);
}
}
导出默认IntlLoader
如果有人需要它，我为此编写了HOC

import React, {Component} from "react";
import {IntlProvider} from "react-intl";

const url = location.protocol + '//' + location.host + "/";

class IntlLoader extends Component {
    constructor(props) {
        super(props);
        const {initialLocale: locale, initialMessages: messages} = props;
        this.state = {locale: 'en', messages};
    }

    fetchLanguagesForDevelopment = () => {
        // if development, use hot loading
        if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
            this.setState({...this.state, loading: true})
            fetch(url + "reactIntlMessages.json")
                .then((res) => {
                    return res.json();
                })
                .then((messages) => {
                    this.setState({loading: false})
                    if (messages !== this.state.messages)
                        this.setState({...this.state, messages})
                })
                .catch((error) => {
                    this.setState({error, loading: false})
                })
        } else {
            const messages = require('../../dist/reactIntlMessages.json')
            if (this.state.messages !== messages)
                this.setState({...this.state, messages, loading: false})
        }
    }

    componentDidMount() {
        this.fetchLanguagesForDevelopment()
    }


    componentWillReceiveProps(nextProps) {
        this.fetchLanguagesForDevelopment()
    }

    render() {
        const {error, messages, loading} = this.state;
        //if (loading) return (<div>Please wait...</div>)
        if (error) return (<div>Error While Loading Language</div>)

        return (
            <IntlProvider {...this.state}>
                {this.props.children}
            </IntlProvider>
        );
    }
}

export default IntlLoader

import React，{Component}来自“React”；
从“react intl”导入{IntlProvider}；
常量url=location.protocol+'/'+location.host+“/”；
类IntlLoader扩展组件{
建造师（道具）{
超级（道具）；
const{initialLocale:locale，initialMessages:messages}=props；
this.state={locale:'en'，messages}；
}
fetchLanguagesForDevelopment=（）=>{
//如果需要开发，请使用热加载
如果（！process.env.NODE|env | process.env.NODE_env==='development'）{
this.setState（{…this.state，加载：true}）
获取（url+“reactIntlMessages.json”）
。然后（（res）=>{
返回res.json（）；
})
。然后（（消息）=>{
this.setState（{loading:false}）
if（messages！==this.state.messages）
this.setState（{…this.state，messages}）
})
.catch（（错误）=>{
this.setState（{error，loading:false}）
})
}否则{
const messages=require（“../../dist/reactIntlMessages.json”）
if（this.state.messages！==消息）
this.setState（{…this.state，消息，加载：false}）
}
}
componentDidMount（）{
this.fetchLanguagesForDevelopment（）文件
}
组件将接收道具（下一步）{
this.fetchLanguagesForDevelopment（）文件
}
render（）{
const{error，messages，loading}=this.state；
//如果（正在加载）返回（请稍候…）
if（error）返回（加载语言时出错）
返回(
{this.props.children}
);
}
}
导出默认IntlLoader