0

我正在尝试使用 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}
)
/>

请问有人可以帮我解决吗？

4

1 回答 1

0

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

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

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

于 2021-02-04T11:34:04.930 回答