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

问题描述

我正在尝试使用 Typescript 和 React 通过 i18n 解决方案本地化 Fluent UI 组件。但是我在更改财产名称方面苦苦挣扎..

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

但我在更改语言时无法更改 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}
)
/>

谁能帮我解决一下？

解决方法

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

相反，您希望按需动态生成此对象。这很容易完成，只需将您的对象创建放在一个函数中并返回它，然后从 useMemo 或在需要时调用它。

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