TypeError: перевод не является функцией

Question

Нет ошибок и предупреждений при компиляции, но когда я запускаю свой проект, я получаю эту ошибку:

TypeError: translate is not a function
  289 | inputProps={{
> 291 |     placeholder: translate('labels.search') + '...',

Я использую response-admin 2.3.3, я могу опубликовать мои package.json, еслиты хочешь.Я попытался почистить свои модули и установить его снова безуспешно.

Это мой комментарий (упрощенный код):

import React from 'react'
import PropTypes from 'prop-types'
import deburr from 'lodash/deburr'
import Autosuggest from 'react-autosuggest'
import match from 'autosuggest-highlight/match'
import parse from 'autosuggest-highlight/parse'
import TextField from '@material-ui/core/TextField'
import Paper from '@material-ui/core/Paper'
import MenuItem from '@material-ui/core/MenuItem'
import Popper from '@material-ui/core/Popper'
import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
import Avatar from '@material-ui/core/Avatar'
import Divider from '@material-ui/core/Divider'
import SearchIcon from '@material-ui/icons/Search'
import { withStyles } from '@material-ui/core/styles'
import { fade } from '@material-ui/core/styles/colorManipulator'
import { Link } from 'react-router-dom'

const styles = theme => ({})

class TestComponent extends React.Component {
    render() {
        const { classes } = this.props
        const { translate } = this.context

        return (
            <div className={classes.root}>
                <Autosuggest
                    inputProps={{
                        placeholder: translate('labels.search') + '...',
                    }}
                />
            </div>
        )
    }
}

TestComponent.propTypes = {
    classes: PropTypes.object.isRequired,
}

TestComponent.contextTypes = {
    translate: PropTypes.func,
}

export default withStyles(styles)(TestComponent)

Answer 1

Вы должны импортировать translate HOC из реагирующего администратора и применить его к своему компоненту:

import { translate } from 'react-admin`;

export default translate(withStyles(styles)(TestComponent));

Затем вы должны получить функцию translate, введенную этим HOC, из вашего реквизита вместоcontext:

const { classes, translate } = this.props