语言切换
如何在 React 应用中配置与切换语言
语言切换使用户可以为你的应用内容设置其首选的 locale。GT React 提供多种方式，从简单的编程式切换到用于自定义语言选择器的预构建 UI 组件。
可用方法
- 编程方式：用于自定义控件的
useSetLocale钩子 - 预构建 UI：带下拉菜单的
<LocaleSelector>组件 - 自定义 UI：用于构建自定义选择器的
useLocaleSelector钩子
使用 useSetLocale 钩子
useSetLocale 钩子可用于切换应用的语言：
import { useSetLocale } from 'gt-react';
export default function MyComponent() {
const setLocale = useSetLocale();
return <button onClick={() => setLocale('en')}>设置语言</button>;
}只需把你想切换的 locale 作为参数传给该 hook 返回的函数即可。
使用 <LocaleSelector> 组件
<LocaleSelector> 组件提供了一个即用型下拉菜单，自动显示所有已配置的 locales：
import { LocaleSelector } from 'gt-react';
export default function MyComponent() {
return <LocaleSelector />;
}此组件会自动：
- 显示项目中配置的所有 locales
- 以各自的母语名称显示 locales
- 处理切换逻辑
- 保持当前选中状态
使用 useLocaleSelector 钩子
如果你想构建自定义的 locale 选择器组件，请使用 useLocaleSelector：
import { useLocaleSelector } from 'gt-react';
function CustomLocaleSelector() {
const {
locale, // 当前活跃的语言区域（例如，'en'、'es'）
locales, // 您的项目支持的语言区域数组 ['en', 'es', 'fr']
setLocale, // 更改语言区域的函数：setLocale('es')
getLocaleProperties // 获取语言区域显示信息的函数
} = useLocaleSelector();
if (!locales?.length) return null;
return (
<select
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{locales.map((loc) => {
const props = getLocaleProperties(loc);
return (
<option key={loc} value={loc}>
{props.nativeNameWithRegionCode} {/* 例如，"English (US)"、"Español (ES)" */}
</option>
);
})}
</select>
);
}重要须知
GTProvider 要求
语言切换组件必须在 <GTProvider> 内使用：
// ✅ 正确
<GTProvider>
<LanguageSwitcher />
</GTProvider>
// ❌ 错误 - 在提供者外部
<LanguageSwitcher />后续步骤
- 动态内容指南 - 运行时内容翻译
- API 参考：
这份指南怎么样？