React-Admin：TranslatableInputs切换标签时标签未翻译的问题求助

针对你遇到的<TranslatableInputs>切换语言后标签未同步更新的问题，这里有两个直接可行的解决办法：

方法1：通过key属性强制组件重渲染 #

利用React的key特性，将当前locale作为<TranslatableInputs>的key值，切换语言时会触发组件重新渲染，从而同步更新标签文本：

import { useLocale } from 'react-admin';
import { TranslatableInputs } from '@react-admin/ra-translate';

const CategoryEdit = () => {
  const locale = useLocale();
  
  return (
    <Edit>
      <SimpleForm>
        {/* 用当前locale作为key，切换语言时强制组件重新渲染 */}
        <TranslatableInputs locales={['en', 'fr', 'cn']} key={locale}>
          <TextInput source="description" />
        </TranslatableInputs>
      </SimpleForm>
    </Edit>
  );
};

方法2：手动控制标签翻译文本 #

通过useTranslate和useLocale钩子，实时获取当前语言下的标签翻译，直接传递给输入框的label属性：

import { useTranslate, useLocale } from 'react-admin';
import { TranslatableInputs } from '@react-admin/ra-translate';

const CategoryEdit = () => {
  const translate = useTranslate();
  const locale = useLocale();
  // 实时拉取对应语言的标签翻译
  const descriptionLabel = translate(`resources.categories.fields.description.${locale}`);

  return (
    <Edit>
      <SimpleForm>
        <TranslatableInputs locales={['en', 'fr', 'cn']}>
          <TextInput source="description" label={descriptionLabel} />
        </TranslatableInputs>
      </SimpleForm>
    </Edit>
  );
};

问题根源 #

React-Admin的TranslatableInputs组件默认没有将locale纳入依赖追踪，切换语言时不会自动触发重渲染，导致标签停留在之前的语言版本。上面两种方法分别通过强制重渲染或实时获取翻译文本的方式，解决了标签同步的问题。

另外必须给React-Admin团队点个赞，他们的工具确实极大提升了后台开发效率！

内容的提问来源于stack exchange，提问作者Zovitch