react-admin 翻译输入字段的默认值答案

【问题标题】：react-admin translate defaultValue for input fieldreact-admin 翻译输入字段的默认值
【发布时间】：2019-01-25 00:54:19
【问题描述】：

我想为创建视图定义默认值，如here 所述。我还希望按照here 的描述翻译默认值。我导入了高阶组件并尝试使用 translate 作为函数。

import { translate } from 'react-admin';

export const PostCreate = (props) => (
<Create {...props}>
    <SimpleForm>
        <TextInput source="title" defaultValue={translate('resources.posts.defaultTitle')} />        
    </SimpleForm>
</Create> );

我收到以下错误：

TypeError：无法将类作为函数调用

也许这是一个缺失的功能？例如，标签属性会自动翻译。

【问题讨论】：

为了理解你的问题，你能提供更多的代码吗？例如，显示包含所有导入的整个文件。也许是一个有相同错误的工作代码框：codesandbox.io/s/pw74xww3p0
抱歉耽搁了，这周我很忙。感谢您的关注和链接 - 我认为我必须从头开始创建所有内容。这是代码：codesandbox.io/s/q84jz88j94 一旦您尝试创建新帖子，错误就会出现。我只更改了 /src/posts/PostCreate.js 和 /src/i18n/en.js

标签： react-admin

【解决方案1】：

react-admin 导出的translate 函数是HOC

import { translate } from 'react-admin';

const PostCreateView = ({ translate, ...props }) => (
<Create {...props}>
    <SimpleForm>
        <TextInput source="title" defaultValue={translate('resources.posts.defaultTitle')} />        
    </SimpleForm>
</Create> );

const PostCreate = translate(PostCreateView);

【讨论】：

【解决方案2】：

resources 变量从何而来？我没有看到它在您的示例中导入。

或者，translate 的参数必须是字符串。您是否尝试过类似的方法：

translate('resources.posts.defaultTitle')

您的方法似乎并不正确。也就是说，我不知道 resources.posts.defaultTitle 是由 React Admin 的默认翻译 API 公开的。

不要忘记声明您的自定义翻译：

import React from 'react';
import { Admin, Resource } from 'react-admin';
import englishMessages from 'ra-language-english';
import frenchMessages from 'ra-language-french';

const customMessages = {
    fr: {}, // custom french
    en: {}, // custom english
};   

const messages = {
    fr: frenchMessages,
    en: englishMessages,
};
const i18nProvider = locale => { ...messages[locale], ...customMessages[locale] };

const App = () => (
    <Admin locale={resolveBrowserLocale()} i18nProvider={i18nProvider}>
        ...
    </Admin>
);

【讨论】：

在我准备代码-sn-p 时引号丢失了。没有引号，它是一个 un def。对于其他情况，我的自定义翻译工作正常，例如单选按钮选择的翻译：const choicesInvoiceType = [ { id: "incoming", name: "resources.invoices.types.incoming" }, { id: "outgoing", name: "resources.invoices.types.outgoing" } ];