React 国际化配置

深藏阁楼爱情的钟 2023-03-05 03:18 1阅读 0赞

## 依赖 ##

yarn add react-intl

## 重要目录结构 ##

练习时可以先按此目录结构把文件都新建好

--------------------

## 配置信息 ##

**locales.js**  
这个文件用来定义常量，在本例中只有中英文

export const LOCALES = { 
      ENGLISH: 'en-us',
      CHINESE: 'zh-cn',
    }

**message**  
这个目录中放的是要翻译的词典

*  en-US.js
    
        import {  LOCALES } from "@/i18n/locales";
        
        export default { 
          [LOCALES.ENGLISH]: { 
            'name': 'name',
            'age': 'age',
            'job': 'job',
            'edit': 'edit',
            'click': 'click',
          }
        }
 *  zh-CN.js
    
        import {  LOCALES } from '@/i18n/locales';
        
        export default { 
          [LOCALES.CHINESE]: { 
            'name': '名字',
            'age': '年龄',
            'job': '工作',
            'edit': '编辑',
            'click': '点击',
          }
        }
 *  index.js
    
        import en from './en-US';
        import zh from './zh-CN';
        
        export default { 
          ...en,
          ...zh,
        }

**provider.js**

import React, {  Fragment } from 'react';
    import {  IntlProvider } from 'react-intl';
    import {  LOCALES } from '@/i18n/locales';
    import message from './messages';
    
    const Provider = ({ children, locale=LOCALES.ENGLISH}) => (
      <IntlProvider
        locale={ locale}
        textComponent={ Fragment}
        messages={ message[locale]}
      >
        { children}
      </IntlProvider>
    )
    
    export default Provider;

在此可以设置默认语言，本例中默认设置为英文

**translate.js**

import React from 'react';
    import {  FormattedMessage } from 'react-intl';
    
    const translate = (id, value={ }) => <FormattedMessage id={ id} values={ { ...value}}/>
    
    export default translate;

该文件用于再次包装 组件FormattedMessage 第二个参数使用场景不多，详情见官方文档

**index.js**

export {  default as I18nProvider } from './provider';
    export {  LOCALES } from './locales';

--------------------

**App.js**

import React from "react";
    import {  BrowserRouter as Router } from 'react-router-dom';
    import './App.css';
    import Home from './pages/home';
    import {  connect } from 'react-redux';
    
    import {  I18nProvider, LOCALES } from './i18n';
    
    function App(props) { 
      const locale = (props.language === 'zh') ? LOCALES.CHINESE : LOCALES.ENGLISH;
      
      return (
        <I18nProvider locale={ locale}>
          <Router>
            <Home />
          </Router>
        </I18nProvider>
      );
    }
    
    const mapStateToProps = (state) => ({ 
      language: state.language
    })
    
    export default connect(mapStateToProps, null)(App);

在本项目中我把切换语言的按钮放在了头部导航栏中，因此我通过 `react-redux` 来控制全局的语言

--------------------

## 使用 ##

*  以组件的方式使用
    
     *      import {  FormattedMessage } from 'react-intl';
            
              <FormattedMessage id={ 'name'} />
     *      import translate from '@/i18n/translate';
            
              <Button type={ 'primary'} onClick={ ButtonCB}>{ translate(ButtonText)}</Button>
 *  以普通文本的方式使用
    
        import React, { PureComponent} from 'react';
        import {  injectIntl } from 'react-intl';
        
        class Demo extends PureComponent { 
        	
        	render() { 
        		const {  intl } = this.props;
        		return (
        			<div>{ intl.formatMessage({ id: 'search'})}</div>
        		)
        	}
        }

**注意**  
当要给 Input 的 placeholder 配置国际化时一定要用最后一种方式，否则会被转成 `[Object object]`