react项目实现中英文国际化切换

最新推荐文章于 2025-03-11 14:52:15 发布

const T

最新推荐文章于 2025-03-11 14:52:15 发布

阅读量913

点赞数 3

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_46533954/article/details/139267327

版权

antd组件的国际化

import zhCN from 'antd/locale/zh_CN';
// for date-picker i18n
import 'dayjs/locale/zh-cn';

return (
  <ConfigProvider locale={zhCN}>
   <Pagination defaultCurrent={1} total={50} showSizeChanger />
  </ConfigProvider>
);

自己写的内容的国际化（利用react-intl库）

pnpm install react-intl

<IntlProvider locale={locale} messages={locales[locale]}>
    <FormattedMessage id="welcome" />
 </IntlProvider>

自己写的内容需要IntlProvider包裹，locale是语言就是自己定义的，但是要和自己写的locales文件中一样，message就是匹配自己定义的locales中的内容了；用FormattedMessage 中的id来匹配对应的内容

整体代码
App.tsx

import  { useState } from 'react';
import enUS from 'antd/locale/en_US';
import zhCN from 'antd/locale/zh_CN';
import { Button, ConfigProvider, Pagination } from 'antd';
import { FormattedMessage, IntlProvider } from 'react-intl';
import locales from '@/locales/locales';

const App = () => {
  const [locale, setLocale] = useState('en'); // 默认语言为英文

  const switchToEnglish = () => {
    setLocale('en');
  };

  const switchToChinese = () => {
    setLocale('zh');
  };

  return (
    <>
      <div>
        <Button onClick={switchToEnglish}>English</Button>
        <Button onClick={switchToChinese}>中文</Button>
      </div>
      <ConfigProvider locale={locale === 'en' ? enUS : zhCN}>
        <IntlProvider locale={locale} messages={locales[locale]}>
          {/* 其他应用内容 */}
          <FormattedMessage id="welcome" />
          <Pagination defaultCurrent={1} total={50} showSizeChanger />
        </IntlProvider>
      </ConfigProvider>
    </>
  );
};

export default App;

src->locales–>locales.ts

const locales: { [key: string]: { [key: string]: string } } = {
    en: {
      welcome: "Welcome",
      greeting: "Hello, how are you?"
    },
    zh: {
      welcome: "欢迎",
      greeting: "你好，你好吗？"
    }
  };
  
  export default locales;