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
);
};
// 如果未返回任何语言环境，则不渲染或进行友好处理
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// 如果 currentLocale 未定义，则回退为一个空字符串
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* 未设置语言环境时的可选回退项 */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}注意事项
- 此 hook 仅在客户端使用。
- 在此处了解更多语言环境代码字符串的相关信息。
后续步骤
- 了解更多有关
<LocaleSelector>组件的信息。 - 了解更多有关
useLocale钩子的信息。
本指南如何?