没有钩子的react-i18next v10

Question

我一直在尝试使用下面链接中的代码来实现react-i18next (10.9.0)：

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使用钩子。

我想知道是否可以使用没有钩子的react-i18next (10.9.0)？如果是，我应该用什么来代替‘翻译’？

Answer 1

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

Answer 2

您可以将钩子转换为道具并将其发送到组件。

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} />
});