Question

在关注文档中的i18n示例后，我尝试在我的代码中插入该示例，如下所示：

import React, { Component } from 'react';
import {
    List,
    Datagrid,
    TextField,
    NumberField,
    DateField,
    Create,
    Edit,
    SimpleForm,
    TextInput,
    SelectInput,
    SelectArrayInput,
    NumberInput,
    DateInput,
    EditButton,
    DisabledInput,
    TabbedForm,
    FormTab,
    ReferenceManyField,
    BooleanInput,
    ViewTitle,
    translate
} from 'admin-on-rest';
import { Card, CardHeader, DropDownMenu, MenuItem } from 'material-ui';

class MyComponent extends Component {

   constructor(props) {
       super(props);

       //State for each DropDownMenu
       this.state = {
           tableValue: null,
           operationTypeValue: null
       }
   }

   handleValues = (label, event, index, value) => {
       switch(label) {
           case 'operation.table':
               this.setState({tableValue: value});
               break;
           case 'operation.type':
               this.setState({operationTypeValue: value});
               break;
           default:
               break;
       }
   }

   render() {
       const { translate } = this.props;

       return (
           <Card>
               <ViewTitle title={translate('resources.datasources.operation.title')}/>
               <CardHeader subtitle={translate('resources.datasources.operation.info')} />
               <DropDownMenu name="operation.table" value={this.state.tableValue} onChange={this.handleValues.bind(this, "operation.table")} >
                   <MenuItem value={0} primaryText={translate('resources.datasources.operation.table')} label={translate('resources.datasources.operation.table')} />
                   <MenuItem value={1} primaryText="table1" label="table1" />
                   <MenuItem value={2} primaryText="table2" label="table2" />
                   <MenuItem value={3} primaryText="table3" label="table3" />
               </DropDownMenu>
               <br/>
               <DropDownMenu name="operation.type" value={this.state.operationTypeValue} onChange={this.handleValues.bind(this, "operation.type")} >
                   <MenuItem value={0} primaryText={translate('resources.datasources.operation.type')} label={translate('resources.datasources.operation.type')} />
                   <MenuItem value={1} primaryText="table1" label="table1" />
               </DropDownMenu>
           </Card>
       );
   }
}

export default translate(MyComponent);

如您所见，这与文档中的示例相同，适用于有状态组件。

但是，当我启动应用程序时，会发生以下错误：

TypeError: translate is not a function

更奇怪的是版本之间的不一致。在1.3.3版本中，我看到这个渲染组件没有任何问题;而在版本1.4中则会发生这种情况。

有任何疑问可能是什么问题？

最佳，

Answer 1

在我的项目中，它不是const { translate } = this.context; 相反，它是const { translate } = this.context;

我认为这应该有用，如果没有，你可以发布this中的内容吗？

Answer 2

我解决了这个问题。

毕竟，问题不是来自组件本身，而translate函数未在props中定义，而是在名为translate的属性中定义。

我修复了调用MyComponent的文件，问题现在已经解决了。

感谢大家的帮助。

admin-on-rest“Translate不是函数”，遵循文档中的示例

2 个答案: