方案描述:由于采用单页面,所以按钮切换时会刷新页面

1、安装 react-intl  babel-plugin-react-intl json-loader

npm i  react-intl  babel-plugin-react-intl json-loader --save-dev

2、修改webpack.config.js 与 webpack.production.config.js

entry: {
  en_US: path.resolve(__dirname, './en-US.js'),
  zh_Hans_CN: path.resolve(__dirname, './zh-CN.js'),
  index: path.resolve(__dirname, 'react/inxex.js')
},
output: {
  path: __dirname + '/build',
  publicPath: '/build',
  filename: '[name].js',
  chunkFilename: "[id].[name].js"
},
3、新建 index-en.html/ index-zh.html
index-en.html  引入 
    <script src="/build/en-US.js"></script>
<script src="/build/index.js"></script>

index-zh.html同理

4、新建文件夹locals   创建 en.json/zh.json
en.json
{
"Home.Title": "username",
"Home.BUtton": "login"
}
zh.json
{
"Home.Title": "用户名",
"Home.BUtton": "登录"
}
5、在入口文件目录下新建 en-US.js、zh-CN.js
import antdEn from 'antd/lib/locale-provider/en_US';
import appLocaleData from 'react-intl/locale-data/en';
import MSGS from './locals/en.json';
import MSGS1 from './M/en.json' window.appLocale = {
messages: {
...MSGS,
...MSGS1
},
antd: antdEn,
locale: 'en-US',
data: appLocaleData,
};
6、入口文件index.js
import ReactDOM from 'react-dom';
import React from 'react';
import App from '../component/App';
import { LocaleProvider } from 'antd'; import { addLocaleData, IntlProvider } from 'react-intl'; const appLocale = window.appLocale; addLocaleData(appLocale.data); ReactDOM.render(
<LocaleProvider locale={appLocale.antd}>
<IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
<App />
</IntlProvider>
</LocaleProvider>,
document.getElementById('react-content')
);
7、app中使用
import React from 'react';
import { DatePicker, Pagination, Table, Icon } from 'antd';
import { FormattedMessage, defineMessages } from 'react-intl';
import InjectExample from './InjectExample'; const messages = defineMessages({
datePicker: {
id: 'App.datePicker.title',
defaultMessage: '日期选择',
},
name: {
id: 'App.talbe.name',
defaultMessage: '姓名',
}
}); class App extends React.Component {
componentDidMount() {
console.log('componentDidMount')
}
render() {return (<div style={{ margin: 20 }}>
<div style={{ margin: 10 }}>
<p><a href="index.html">中文</a></p>
<p><a href="index-en.html">english</a></p>
</div>
<div style={{ margin: 10 }}>
<FormattedMessage {...messages.datePicker} />: &nbsp;
<DatePicker />
</div> </div>);
}
} export default App;

参考demo: https://github.com/yangstar/intl-example

react intl 国际化的更多相关文章

  1. [React Intl] Use a react-intl Higher Order Component to format messages

    In some cases, you might need to pass a string from your intl messages.js file as a prop to a compon ...

  2. mac centos linux 安装PHP扩展 INTL(国际化) ———— error: 'ext/standard/php_smart_str.h'

    PHP简单源码安装扩展 五个步骤: 详细说明下: cd /fujieace/php7.0/ext/intl:#进入INTL扩展目录? 在编译扩展时候需要phpize准备环境,准备程序需要获取这个目录的 ...

  3. [React Intl] Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

    Some browsers, such as Safari < 10 & IE < 11, do not support the JavaScript Internationali ...

  4. [React Intl] Get locale value from intl injector

    Get 'injectIntl' from  'react-intl', it is a high order componet. We need to wrap our component into ...

  5. [React Intl] Install and Configure the Entry Point of react-intl

    We’ll install react-intl, then add it to the mounting point of our React app. Then, we’ll use react- ...

  6. [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)

    Using the react-intl FormattedMessage component, we’ll learn how to render content conditionally in ...

  7. [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

    Using a react-intl FormattedNumber component, we'll pass a Number and a few additional props in orde ...

  8. [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative

    Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human reada ...

  9. [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime

    Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into ...

  10. [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage

    In this lesson, we’ll use the react-intl FormattedHTMLMessage component to display text with dynamic ...

随机推荐

  1. (0619) wavedrom 画时序图---链接

    https://www.cnblogs.com/jackzhang001/p/15879207.html

  2. 使用viper读取配置文件

    配置文件config.yml mysql: type: mysql dsn: "user:pass@tcp(localhost:30306)/db_name?charset=utf8& ...

  3. cgroup与docker

    1.使用 cgroup namespace 需要内核开启 CONFIG_CGROUPS 选项.可通过以下方式验证: 1 root@container:~/namespace_test# grep CO ...

  4. nestjs中swagger的基本使用

    nestjs中swagger的基本使用 安装 $ npm install --save @nestjs/swagger swagger-ui-express //如果使用fastify,则必须安装fa ...

  5. 认识JavaWeb

    JavaWeb Java Web 1.基本概念 1.1.前言 web开发: web,网页的意思 , www.baidu.com 静态web html,css 提供给所有人看的数据始终不会发生变化! 动 ...

  6. iOS笔记 - runtime 02:objc_msgSend执行流程

    objc_msgSend 执行流程 1 - 第一步:消息发送 2 - 第二步:动态解析 代码示例:resolveInstanceMethod | resolveClassMethod 存在问题:68 ...

  7. python手动安装包办法

    首先去官网找知己需要的包,我这是以自己安装为例 先找需要安装的包然后看箭头准备下载 我这里选择的是tar压缩格式的点一下箭头指的地方会弹出下载按钮,之后下载即可 找到自己安装的python文件所在的位 ...

  8. BeanUtils.copyProperties null覆盖问题

    直接用一下工具类 public class CopyUtils { public static String[] getNullPropertyNames (Object source) { fina ...

  9. 解决django中的跨域问题

    解决django中的跨域问题: Django项目中出现跨域问题,用第三方包django-cors-headers来解决跨域问题. 安装:pip install django-cors-headers; ...

  10. 暴雪、迪士尼大佬用什么画画?RayLink远控软件助力解锁远程创作

    CG绘画从业者,如原画师.插画师.漫画家.设计师等,一定对数位板\数位屏不陌生,数位板\数位屏是完成CG绘画作品的重要绘图工具之一. 从画画小白到数字绘画大神,从0基础插画培训班学生到国际知名游戏.动 ...