# gt-react: General Translation React SDK: LocaleSelector
URL: https://generaltranslation.com/zh/docs/react/api/components/locale-selector.mdx
---
title: LocaleSelector
description: LocaleSelector 组件 API 参考
---

{/* 自动生成：请勿直接编辑。请编辑 content/docs-templates/ 中的模板。 */}


## 概述

`<LocaleSelector>` 组件用于选择用户的区域设置。
这是一个客户端组件，提供用于选择区域设置的下拉菜单。

## 参考

### 返回值

一个供用户选择其区域设置的组件。

### 属性

* **`locales`** (可选) ：`string[]`
  * 用于填充下拉菜单的可选区域设置列表 (例如 `['en', 'es-MX', 'fr']`) 。如果未提供，则使用 `<GTProvider>` 上下文中的区域设置列表。
* **`customNames`** (可选) ：`{[locale: string]: string}`
  * 一个可选对象，用于将区域设置代码映射为自定义显示名称。
  * 示例：`{{ 'en-US': 'English (United States)', 'es': 'Español' }}`

## 示例

### 基本用法

```jsx
import { LocaleSelector } from 'gt-react';

export default function MyComponent() {
  return <LocaleSelector />;
}
```


### 与 `customNames` 搭配使用

```jsx
import { LocaleSelector } from 'gt-react';

export default function MyComponent() {
  const myCustomNames = {
    en: 'English',
    es: 'Español',
    'fr-CA': 'Français (Canada)',
  };
  return <LocaleSelector customNames={myCustomNames} />;
}
```

***


## 注意事项

* `<LocaleSelector>` 组件可让你为应用选择其他区域设置。
* `<LocaleSelector>` 组件在服务端组件中不可用。

## 后续步骤

* 进一步了解 [`useLocale`](/docs/react/api/helpers/use-locale) 钩子。
* 查看 [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) 钩子，了解如何定义自定义区域设置选择器。
* 进一步了解[区域设置字符串](/docs/core/locales)。