使用 i18n 在 Fluent UI 组件属性中进行本地化

Question

我正在尝试使用 Typescript 和 React 通过 i18n 解决方案本地化 Fluent UI 组件。但我在属性..

中努力更改名称

i18n 是根据文档使用 hooks 实现的（在通用组件中它运行良好）

但是当我更改语言时我无法更改 CommandBar 项目名称

来自功能组件

...
return (
...
<CommandBar
  items={CommandBarItems.menu}
)
/>
...
)
..

项目在单独的文件中

import i18n from '../i18n'; 
...
const FileMenuOpen:ICommandBarItemProps = {
    key: Routes.FileMenuOpenRoute,
    name: i18n.t('tpmain:menu.fileOpenLbl'),
    href: `#${Routes.FileMenuOpenRoute}`,
    iconProps: { iconName: 'DocumentSet', style: { fontSize: 16 } }
};

....

CommandBarItems = { menu: [FileMenu, UserMenu, EditMenu, AdviceMenu], farItems: [], }
export default CommandBarItems;

我的问题是 CommandBarItem 在启动时只翻译一次。不会对语言更改做出反应。

我也尝试在组件内部使用Memo，但没有成功：

const { t, i18n } = useTranslation();

const items = useMemo(() => {
    console.log("check for memo working")
    return CommandBarItems.menu
  }, [i18n.language])

return (
...
<CommandBar
  items={items}
)
/>

谁能帮我解决一下？

Answer 1

模块级变量，例如 FileMenuOpen，仅在模块加载时计算一次。 useMemo 看起来格式正确，但目前总是获取原始静态对象。

相反，您希望根据需要动态生成此对象。这很容易通过将你的对象创建放在一个函数中并 return 它，并从 useMemo 或任何需要的时候调用它来轻松完成。

此技术不仅适用于此，而且在您需要重新生成 Fluent UI 组件配置的任何时候都适用。

使用 i18n 在 Fluent UI 组件属性中进行本地化

Localization in Fluent UI component properties with i18n

localization

i18next

react-i18next

fluentui-react