更改语言

概述

在本指南中，我们将向您展示如何更改 React 应用程序的语言。

如果您尚未使用 gt-react 设置您的应用程序，请在继续之前参考设置指南。

设置

使用 gt-react 更改应用程序语言有三种方式。

1. 使用 useSetLocale() 钩子
2. 使用 <LocaleSelector> 组件
3. 使用 useLocaleSelector() 钩子

我们将在本指南中介绍这三种方法。

使用 useSetLocale 钩子

useSetLocale 钩子是一个客户端钩子，允许你更改应用程序的语言。它必须在 GTProvider 组件内使用。

import { useSetLocale } from 'gt-react';
export default function MyComponent() {
  const setLocale = useSetLocale();
 
  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}

只需将你想要更改的语言环境作为参数提供给 useSetLocale 钩子返回的回调函数。

使用 <LocaleSelector> 组件

<LocaleSelector> 组件是一个客户端组件，允许您更改应用程序的语言。它必须在 GTProvider 组件内使用。

这是一个基础的UI下拉菜单，显示您在项目中启用的所有语言环境，并允许用户选择不同的语言环境。

import { LocaleSelector } from 'gt-react';
 
export default function MyComponent() {
  return <LocaleSelector />;
}

使用 useLocaleSelector 钩子

或者，如果您想创建自己的语言环境选择器组件，您可以使用 useLocaleSelector 钩子。

这个钩子返回当前语言环境、语言环境列表和 useSetLocale 钩子。

import { useLocaleSelector } from 'gt-react';

查看API参考获取更多信息。

后续步骤

• 了解更多关于 useSetLocale 钩子的信息。
• 了解更多关于 <LocaleSelector> 组件的信息。
• 了解更多关于 useLocaleSelector 钩子的信息。