Я хотел бы использовать response-i18next с моим компонентом, подключенным к react-redux, и не знаю, как это сделать.
Я упростил свой код, чтобы показать пример подключенного компонента:
import React from 'react';
import {connect} from 'react-redux';
import {userSelectors} from "./userSelectors";
interface IConnectedProps {
activeUserName: string | undefined;
}
export class LandingPageComponent extends React.Component<IConnectedProps> {
public render(): JSX.Element {
return (
<React.Suspense fallback={<Spinner/>}>
<React.Fragment>
<div>
... a bunch of controls using translated text
</div>
<div>{activeUserName}</div>
</React.Fragment>
</React.Suspense>
);
}
}
const mapStateToProps = (state: ICoreRootState) : IConnectedProps => ({
activeUserName: userSelectors.getDisplayName(state),
});
export const LandingPage = connect(mapStateToProps)(LandingPageComponent);
Установленные версии пакета:
react version: 16.8.4
react-redux version: 5.1.1
react-i18next version: 10.6.0
Что я пробовал:
1) Я получаю сообщение об ошибке ниже, когда использую withTranslation, WithTranslation следующим образом:
export class LandingPageComponent extends React.Component<IConnectedProps & WithTranslation> {...}
export const LandingPage = connect(mapStateToProps)(withTranslation()(LandingPageComponent));
Ошибка:
The above error occurred in the <withI18nextTranslation(LandingPageComponent)> component:
in withI18nextTranslation(LandingPageComponent) (created by Connect(withI18nextTranslation(LandingPageComponent)))
in Connect(withI18nextTranslation(LandingPageComponent))
in Route
in t
in Connect(t) (at App.tsx:49)
in Switch (at App.tsx:45)
in App (at src/index.tsx:14)
in Router (created by ConnectedRouter)
in ConnectedRouter (created by Connect(ConnectedRouter))
in Connect(ConnectedRouter) (at src/index.tsx:13)
in Provider (at src/index.tsx:12)
2) Я получаю сообщение об ошибке ниже, когда использую withTranslation, WithTranslation следующим образом:
export class LandingPageComponent extends React.Component<IConnectedProps & WithTranslation> {...}
export const LandingPage = withTranslation()(connect(mapStateToProps)(LandingPageComponent));
Ошибка:
index.js:1446 The above error occurred in the <withI18nextTranslation(Connect(LandingPageComponent))> component:
in withI18nextTranslation(Connect(LandingPageComponent))
in Route
in t
in Connect(t) (at App.tsx:49)
in Switch (at App.tsx:45)
in App (at src/index.tsx:14)
in Router (created by ConnectedRouter)
in ConnectedRouter (created by Connect(ConnectedRouter))
in Connect(ConnectedRouter) (at src/index.tsx:13)
in Provider (at src/index.tsx:12)
3) Я не могу использовать useTranslation, так как хуки не могут использоваться внутри класса.
Я также пробовал следующее:
... a bunch of imports
interface ILogoutButtonProps {
userName?: string;
}
interface IConnectedHandlers {
readonly logout: any;
readonly push: any;
}
class InnerLogoutComponent extends React.Component<IButtonProps & IConnectedHandlers & ILogoutButtonProps & WithTranslation, {}> {
public render() {
const {userName, onClick, logout: Logout, push: Push, ...buttonProps} = this.props;
const logoutText = this.props.i18n.t(StringNames.logout);
const buttonText = userName ? logoutText + " " + userName : logoutText;
return (
<Button {...buttonProps} text={buttonText} onClick={this.handleClick}/>
);
}
private handleClick = (event: React.MouseEvent<HTMLElement>) : void => {
this.props.logout()
.then(() => this.props.push(LoginPaths.verifyUser));
}
}
const InnerLogoutTranslatedComponent = withTranslation()(InnerLogoutComponent);
class LogoutComponentInternal extends React.Component<IButtonProps & IConnectedHandlers & ILogoutButtonProps, {}> {
public render () {
return (
<InnerLogoutTranslatedComponent {...this.props}/>
);
}
}
export const LogoutComponent = connect(null,{logout, push})(LogoutComponentInternal);
но я получаю следующую ошибку:
Hooks can only be called inside the body of a function component.
Заранее спасибо...