按照admin-on-rest文档i18n示例操作后出现“Translate is not a function”错误

看起来你遇到的这个错误，大概率是因为没有正确配置国际化环境，或者错误使用了translate高阶组件导致的。我来一步步帮你排查和解决：

1. 先确认依赖是否安装完整 #

admin-on-rest的国际化依赖react-intl，首先确保你已经安装了它：

npm install react-intl --save
# 或者用yarn
yarn add react-intl

2. 必须配置i18nProvider #

这是最容易忽略的关键步骤！你需要在根组件中为Admin组件提供i18nProvider，否则translate高阶组件无法正常工作。

举个简单的配置示例：

// 在你的App.js或者根组件中
import React from 'react';
import { Admin, Resource, i18nProvider } from 'admin-on-rest';
import { messages } from './i18n'; // 你的多语言文件

// 配置i18nProvider
const myI18nProvider = i18nProvider({
    locales: ['zh', 'en'], // 你需要支持的语言列表
    defaultLocale: 'zh',
    messages, // 你的翻译消息对象
});

// 把i18nProvider传给Admin组件
const App = () => (
    <Admin i18nProvider={myI18nProvider}>
        {/* 这里配置你的Resource组件 */}
    </Admin>
);

export default App;

3. 正确使用translate高阶组件 #

translate是一个高阶组件（HOC），不是可以直接调用的函数。你需要用它来包装你的组件，有两种常见用法：

用法一：装饰器方式（需配置babel支持装饰器语法） #

import { translate } from 'admin-on-rest';

@translate
class MyComponent extends Component {
    render() {
        // 通过props获取真正可用的translate函数
        const { translate } = this.props;
        return <div>{translate('my.custom.translation')}</div>;
    }
}

用法二：直接包装组件导出 #

import { translate } from 'admin-on-rest';

class MyComponent extends Component {
    render() {
        const { translate } = this.props;
        return <div>{translate('my.custom.translation')}</div>;
    }
}

// 用translate包装组件后再导出
export default translate(MyComponent);

4. 检查多语言文件格式是否正确 #

确保你的messages对象结构符合要求，比如：

// i18n.js
export const messages = {
    zh: {
        'my.custom.translation': '我的自定义翻译文本',
        // 还可以添加admin-on-rest内置的翻译键，比如ra.page.list、ra.action.create等
    },
    en: {
        'my.custom.translation': 'My custom translation text',
    },
};

如果以上步骤都检查并调整完毕，应该就能解决"Translate is not a function"的错误了。

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