tencent cloud

React
下载PDF
最后更新时间：2025-07-22 14:42:15
React
最后更新时间： 2025-07-22 14:42:15
下载PDF

功能描述

React UIKit 默认自带 英语、日语、韩语、中文简体、中文繁体 语言包，作为界面展示语言。




使用默认支持的语言

如果您的 App，需要的语言仅包括英语 / 日语 / 韩语 / 中文简体/ 中文繁体 ，且不需要新增词条或修改现有词条翻译，请参考本部分。默认支持以下语言：
en-US - 英语
zh-CN - 简体中文
zh-TW - 繁体中文
ja-JP - 日语
ko-KR - 韩语
auto - 自动检测
其中，自动检测（auto）会按以下优先级选择语言：
1. 浏览器语言设置。
2. 系统语言设置。
3. 默认回退到 en-US。

指定语言

请使用 UIKitProvider 包装您的应用，并配置语言属性：
  // language support en-US / zh-CN / ja-JP / ko-KR / zh-TW / auto
  <UIKitProvider language={'en-US'}>...</UIKitProvider>

动态切换语言

在 UIKitProvider 之外，动态切换 React UIKit 语言：
import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-react';

function App() {
  const [lang, setLang] = useState<'en-US' | 'zh-CN' | 'zh-TW' | 'ja-JP' | 'ko-KR'>('en-US');
  return (
    <div>
      <button onClick={() => setLang('zh-CN')}>中文</button>
      <button onClick={() => setLang('en-US')}>English</button>
      <div>{`当前的语言是: ${lang}`}</div>
      <UIKitProvider
        language={lang}
        theme="light"
      >
        <ConversationList />
      </UIKitProvider>
    </div>
  );
}
在 UIKitProvider 之内可以使用 useUIKit Hook 访问国际化功能，但由于 useUIKit Hook 是基于 Context 实现的，因此不能在 <UIKitProvider /> 外部调用。
import React from 'react';
import { useUIKit, UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-react';

function LanguageSwitch() {
  const { t, language, setLanguage } = useUIKit();
  return (
    <div>
      <div>当前的语言是: {language}</div>
      <div>{t('Search.Searching')}</div>
      <button onClick={() => setLanguage('en-US')}>English</button>
      <button onClick={() => setLanguage('zh-CN')}>中文</button>
    </div>
  );
}

function ChatApp() {
  return (
    <UIKitProvider language="en-US">
     <LanguageSwitch />
    </UIKitProvider>
  );
}

使用语言词条

使用 hook useUIKit 导出翻译函数 t，useUIKit 作为 Hook 只能在 UIKitProvider 的子组件中使用。
import React from 'react';
import { UIKitProvider, useUIKit } from '@tencentcloud/chat-uikit-react';

export default function App() {
  return (
    // init language
    <UIKitProvider language='en-US'>
      <Child />
    </UIKitProvider>
  );
}

function Child() {
    const { t } = useUIKit();
    return <div>{t('TUIChat.No More')}</div>
}

交流与反馈

加入Telegram 技术交流群组或 WhatsApp 交流群，享有专业工程师的支持，解决您的难题。

本页内容是否解决了您的问题？
您也可以 联系销售 或 提交工单 以寻求帮助。
是
否

文档反馈