Helpers
useLocaleSelector
useLocaleSelector 钩子的 API 参考
概述
此 hook 会返回当前的 locale、locales 列表、useSetLocale hook，以及一个用于获取 locale 属性的函数。
便于在你构建自定义的 locale 选择器组件时直接使用。
如果你不想自己实现，可以直接使用 <LocaleSelector> 组件。
参考资料
返回值
一个对象，包含当前的 locale、locales 列表、useSetLocale 钩子，以及一个用于获取 locale 属性的函数。
示例
<LocaleSelector>
这是 <LocaleSelector> 组件的示例实现。
export default function LocaleSelector({
locales: _locales,
...props
}: {
locales?: string[];
[key: string]: any;
}): React.JSX.Element | null {
// 获取语言选择器属性
const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
_locales ? _locales : undefined
);
// 获取显示名称
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// 如果没有返回 locales，则不渲染任何内容或优雅处理
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// 如果 currentLocale 未定义，则回退到空字符串
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* 当没有设置 locale 时的可选回退 */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}注意事项
- 此 hook 仅在客户端运行。
- 在这里了解更多关于语言环境代码字符串的说明。
下一步
- 详细了解
<LocaleSelector>组件。 - 详细了解
useLocale钩子。
这份指南怎么样？