react intl 国际化
方案描述:由于采用单页面,所以按钮切换时会刷新页面
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"
},
<script src="/build/en-US.js"></script>
<script src="/build/index.js"></script>
index-zh.html同理
en.json
{
"Home.Title": "username",
"Home.BUtton": "login"
}
zh.json
{
"Home.Title": "用户名",
"Home.BUtton": "登录"
}
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,
};
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')
);
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} />:
<DatePicker />
</div> </div>);
}
} export default App;
react intl 国际化的更多相关文章
- [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 ...
- mac centos linux 安装PHP扩展 INTL(国际化) ———— error: 'ext/standard/php_smart_str.h'
PHP简单源码安装扩展 五个步骤: 详细说明下: cd /fujieace/php7.0/ext/intl:#进入INTL扩展目录? 在编译扩展时候需要phpize准备环境,准备程序需要获取这个目录的 ...
- [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 ...
- [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 ...
- [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- ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
随机推荐
- (0619) wavedrom 画时序图---链接
https://www.cnblogs.com/jackzhang001/p/15879207.html
- 使用viper读取配置文件
配置文件config.yml mysql: type: mysql dsn: "user:pass@tcp(localhost:30306)/db_name?charset=utf8& ...
- cgroup与docker
1.使用 cgroup namespace 需要内核开启 CONFIG_CGROUPS 选项.可通过以下方式验证: 1 root@container:~/namespace_test# grep CO ...
- nestjs中swagger的基本使用
nestjs中swagger的基本使用 安装 $ npm install --save @nestjs/swagger swagger-ui-express //如果使用fastify,则必须安装fa ...
- 认识JavaWeb
JavaWeb Java Web 1.基本概念 1.1.前言 web开发: web,网页的意思 , www.baidu.com 静态web html,css 提供给所有人看的数据始终不会发生变化! 动 ...
- iOS笔记 - runtime 02:objc_msgSend执行流程
objc_msgSend 执行流程 1 - 第一步:消息发送 2 - 第二步:动态解析 代码示例:resolveInstanceMethod | resolveClassMethod 存在问题:68 ...
- python手动安装包办法
首先去官网找知己需要的包,我这是以自己安装为例 先找需要安装的包然后看箭头准备下载 我这里选择的是tar压缩格式的点一下箭头指的地方会弹出下载按钮,之后下载即可 找到自己安装的python文件所在的位 ...
- BeanUtils.copyProperties null覆盖问题
直接用一下工具类 public class CopyUtils { public static String[] getNullPropertyNames (Object source) { fina ...
- 解决django中的跨域问题
解决django中的跨域问题: Django项目中出现跨域问题,用第三方包django-cors-headers来解决跨域问题. 安装:pip install django-cors-headers; ...
- 暴雪、迪士尼大佬用什么画画?RayLink远控软件助力解锁远程创作
CG绘画从业者,如原画师.插画师.漫画家.设计师等,一定对数位板\数位屏不陌生,数位板\数位屏是完成CG绘画作品的重要绘图工具之一. 从画画小白到数字绘画大神,从0基础插画培训班学生到国际知名游戏.动 ...