# General Translation React SDKs (gt-react, gt-next, gt-react-native): useLocaleSelector
URL: https://generaltranslation.com/zh/docs/react/reference/hooks/use-locale-selector.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 构建自定义区域设置切换器。useLocaleSelector 的 API 参考。

`useLocaleSelector` 钩子会公开构建自定义语言切换器所需的各个部分：活动区域设置、可用 locales、区域设置属性辅助工具，以及一个用于更改区域设置的 setter。

*可在 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native` 中使用。*

## 概览 [#overview]

调用 `useLocaleSelector`，并将其返回值接入你自己的 `<select>` 或自定义 UI。

*示例从 `gt-react` 导入；请改为从你所用框架的软件包导入。*

```tsx
'use client';
import { useLocaleSelector } from 'gt-react';

export default function MySelector() {
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {locales.map((l) => (
        <option key={l} value={l}>
          {getLocaleProperties(l).nativeNameWithRegionCode}
        </option>
      ))}
    </select>
  );
}
```

*注意：`useLocaleSelector` 仅限客户端使用。如果你不需要自定义 UI，请改用 [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) 组件。*

## 工作方式 [#how-it-works]

该钩子提供了选择器所需的全部内容：当前激活的 `locale`、`locales` 列表、用于切换区域设置的 `setLocale`，以及用于渲染显示名称的 `getLocaleProperties`。传入部分 locales 即可限制可选项。区域设置切换行为取决于框架；请参阅[管理区域设置](/docs/react/guides/managing-locales#persistence)。

## 参数 [#parameters]

| 参数                    | 描述          | 类型         | 可选 | 默认值        |
| --------------------- | ----------- | ---------- | -- | ---------- |
| [`locales`](#locales) | 可提供的区域设置子集。 | `string[]` | 是  | 全部受支持的区域设置 |

### `locales` [#locales]

**类型** `string[]` · **可选** · **默认值** 所有受支持的区域设置

要提供的受支持区域设置子集。该钩子会保留显式提供的数组顺序。省略时，会按原生显示名称对 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 上下文中的区域设置进行排序。

## 返回值 [#returns]

**类型** `object`

| 字段                    | 说明                        | 类型                                     |
| --------------------- | ------------------------- | -------------------------------------- |
| `locale`              | 当前选定的区域设置。                | `string`                               |
| `locales`             | 可用的 locales。                  | `string[]`                             |
| `setLocale`           | 更改活动区域设置。              | `(locale: string) => void`             |
| `getLocaleProperties` | 使用配置的自定义映射获取某个区域设置的显示元数据。 | `(locale: string) => LocaleProperties` |

## 注意事项 [#notes]

* `useLocaleSelector` 仅限客户端使用。
* 如果需要现成的下拉列表，请使用 [`<LocaleSelector>`](/docs/react/reference/components/locale-selector)。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.