TypeError: translate is not a function
TypeError: translate is not a function
编译时没有错误和警告,但是当我启动我的项目时出现此错误:
TypeError: translate is not a function
289 | inputProps={{
> 291 | placeholder: translate('labels.search') + '...',
我正在使用 react-admin 2.3.3,如果你愿意,我可以 post 我的 packages.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)
您必须从 react-admin 导入 translate
HOC 并将其应用到您的组件:
import { translate } from 'react-admin`;
export default translate(withStyles(styles)(TestComponent));
然后,你应该从你的 props 中得到这个 HOC 注入的 translate
函数而不是 context
:
const { classes, translate } = this.props
编译时没有错误和警告,但是当我启动我的项目时出现此错误:
TypeError: translate is not a function
289 | inputProps={{
> 291 | placeholder: translate('labels.search') + '...',
我正在使用 react-admin 2.3.3,如果你愿意,我可以 post 我的 packages.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)
您必须从 react-admin 导入 translate
HOC 并将其应用到您的组件:
import { translate } from 'react-admin`;
export default translate(withStyles(styles)(TestComponent));
然后,你应该从你的 props 中得到这个 HOC 注入的 translate
函数而不是 context
:
const { classes, translate } = this.props