没有钩子的 react-i18next v10

Question

我一直在尝试使用下面的代码来实现 react-i18next (10.9.0) link:

https://codesandbox.io/s/l23no88qmz?from-embed

但是我得到了错误：

Attempted import error: 'translate' is not exported from 'react-i18next'.

从[https://github.com/i18next/react-i18next/issues/810]开始，我才知道v8用的是'translate'，v10用的是hooks

我想知道我是否可以在没有钩子的情况下使用 react-i18next (10.9.0)？如果是，我应该用什么代替 'translate'？

Answer 1

react-i18next v10 已经过专门重构以使用挂钩，因此您需要调整代码以支持挂钩，或者使用旧版 v9。

Answer 2

可以将hook转化为prop发送给组件。

import {useTranslation} from 'react-i18next';

class XXX extends React.Component {
    render() {
          const {i18nTranslation} = this.props;

          return <div>{i18nTranslation.t('welcome.msg')}</div>
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(function (props) {
     const i18nTranslation = useTranslation();
     return <XXX {...props} i18nTranslation={i18nTranslation} />
});

没有钩子的 react-i18next v10

react-i18next v10 without hooks

react-i18next

react-hooks