反应管理员<TranslateInput>如何获取翻译后的标签？

Question

按照文档[这里][1]，我创建了一些en.js和fr.js文件来翻译我的react-admin应用程序的字段

例子：

const fr = {
resources: {
categories: {
name: 'Catégorie |||| Catégories',
fields: {
code: 'N°',
trigram: 'Trigramme',
description: {
en: 'Description (Anglais)',
fr: 'Description (Français)',
cn: 'Description (Chinois)',
},
},
},
},
};

我有一个类似的英文和中文文件，描述如下

description: {
en: 'Description (English)',
fr: 'Description (French)',
cn: 'Description (Chinese)',
},

和

description: {
en: '类别的描述 (英文)',
fr: '类别的描述 (法文)',
cn: '类别的描述 (中文)',
},

这似乎工作正常，我也可以使用可翻译的输入

<TranslatableInputs locales={['en', 'fr', 'cn']}>
<TextInput source='description' />
</TranslatableInputs>

但是，选项卡视图中的标签似乎没有应用(在列表模式下它们正确显示)例如使用 description.en，因此我想与.js文件的链接工作正常。

但是如带有音乐示例的文档所示，当我们切换选项卡时，标签不会改变(实际上同样的问题显示在文档的 gif 中

">

名称"标签不会更改为"nom">

[！在此处输入图像描述][2]][2]

有什么帮助解决这个问题吗？ 非常感谢，也非常感谢RA团队的出色工作

尼科 [1]： https://marmelab.com/react-admin/TranslatableInputs.html [2]： https://i.stack.imgur.com/16fWf.gif

Answer 1

这是一个很好的问题...以及可翻译输入组件的当前限制。

输入标签转换使用全局用户区域设置，而不是所选选项卡之一。这将是一个添加到 react-admin 的很棒的功能，我邀请您在 react-admin 存储库中打开一个功能请求。

同时，您应该根据 react-admin 编写自己的 TranslatableInput，并使用强制使用不同语言环境的<I18NContext.Provider>包装每个选项卡内容。

类似的东西(未经测试)：

export const TranslatableInputs = (props) => {
const {
className,
defaultLocale,
locales,
groupKey = '',
selector = <TranslatableInputsTabs groupKey={groupKey} />,
children,
variant,
margin,
} = props;
const context = useTranslatable({ defaultLocale, locales });
const i18nProvider = useI18nProvider();
return (
<Root className={className}>
<TranslatableContextProvider value={context}>
{selector}
{locales.map(locale => (
<I18nContext.Provider value={{...i18nProvider, getLocale: () => locale }}>
<TranslatableInputsTabContent
key={locale}
locale={locale}
groupKey={groupKey}
variant={variant}
margin={margin}
>
{children}
</TranslatableInputsTabContent>
</I18nContext.Provider>
))}
</TranslatableContextProvider>
</Root>
);
};