react(17.0.12) 项目中使用国际化_react17 多语言-CSDN博客

这篇博客介绍了如何在React应用中使用react-intl-universal库来实现多语言支持。首先通过yarn添加依赖，然后在入口文件引入并初始化，设置本地化文件。接着展示了一个Header组件的实现，包括国际化菜单项和语言切换功能。最后，提供了动态切换语言的方法，通过修改cookie并刷新页面来完成。

摘要由CSDN通过智能技术生成

首先感谢这位博主的贡献(原文链接：https://segmentfault.com/a/1190000019576048)，解决了我的问题，问题解决后想自己记录下

链接中阐述了3种方式，我用的是react-intl-universal方式，直接步入正题

1.第一步安装

yarn add react-intl-universal

2.在项目入口文件中引入并进行初始化

import intl from 'react-intl-universal';

// 这是本地话的多语言文件，在App.js同级目录下创建的
const locales = {
  "en-US": require('./locales/en-US.json'),
  "zh-CN": require('./locales/zh-CN.json')
};


class App extends React.Component {
  state = { initDone: false }

  componentDidMount() {
    this.loadLocales();
  }

  loadLocales() {
    // 初始化时指定语言，可以是浏览器地址中query的参数，可以是cookie中存储的，或者是浏览器的当前语言
    let currentLocale = intl.determineLocale({
      urlLocaleKey: "lang",
      cookieLocaleKey: "lang"
    });
  
    intl.init({
      currentLocale, 
      locales,
    })
      .then(() => {
        this.setState({ initDone: true });
      });
  }

  render() {
    return (
      this.state.initDone &&
      <div className="App">

      </div >
    );
  }
}

3.自己创建的多语言文件格式，是个json

{
  "home": "Home",
  "marketing": "Marketing",
  "product": "Product",
  "contactUs": "contact us",
  "consult": "Consult",
  "lang_zh": "Chinese",
  "lang_en": "English"
}

4.在其他组件中可以直接调用了，顺便附上antd 导航条功能，antd导航条子菜单(SubMenu)的显示也是个大坑啊，折腾了半天，后来把子菜单改成下拉菜单了

import intl from 'react-intl-universal';

render() {
        const menu = (
            <Menu onClick={this.handleMenuClick} >
                <Menu.Item selectable="true" key="zh-CN">{intl.get('lang_zh')}</Menu.Item>
                <Menu.Item key="en-US">{intl.get('lang_en')}</Menu.Item>
            </Menu>
        );
        return (
            <Header>
                <div className="logo" >
                    <img src={logo} alt=""></img>
                </div>

                <Menu theme="dark" mode="horizontal" defaultSelectedKeys="0"  >
                    {this.state.navArry.map((item, index) => {
                        return <Menu.Item key={index}>{item.key}</Menu.Item>;
                    })}

                </Menu>

                <Dropdown overlay={menu}  >
                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                        <GlobalOutlined />
                    </a>
                </Dropdown>

            </Header>
        )
    }

5.动态切换语言(修改url或者cookie都可触发，我是修改的cookie)，刷新页面

 handleMenuClick = e => {
        cookies.save('lang', e.key, { path: '/' });
        window.location.reload(true);

    };