我想在与打字稿应用程序互动时做HoC组件。但是,当我将组件包装在这里时: RegisterForms.tsx:
import React from "react";
import SingleFormGroup from "../atoms/SingleFormGroup";
import Aux from '../../../Hoc/Aux';
import Alert from "../../../UI/Alert/Alert";
import withLoading from "../../../Hoc/withLoading";
interface IProps {
hasRegisterErrors: boolean
}
class RegisterForms extends React.Component<IProps>{
constructor(props:IProps){
super(props);
}
render () {
return (
<Aux>
<Alert showError={this.props.hasRegisterErrors} />
<SingleFormGroup
id="name"
icon="ti-user"
inputType="text"
placeholder="Your name"
/>
<hr className="hr-xs" />
<SingleFormGroup
id="email"
icon="ti-email"
inputType="text"
placeholder="Your email address"
/>
<hr className="hr-xs" />
<SingleFormGroup
id="password"
icon="ti-unlock"
inputType="password"
placeholder="Choose a password"
/>
</Aux>
)
}
}
export default withLoading(RegisterForms);
,然后我尝试将withLoading.tsx连接到redux存储。 withLoading.tsx:
import React from "react";
import { connect } from "react-redux";
import Spinner from "../UI/Spinner/Spinner";
import { compose } from "redux";
import { ILoginState, IRegisterState } from "../store/types/States";
interface WithLoadingProps{
loading: boolean
}
const withLoading = <P extends object>(Component: React.ComponentType<P>) => {
return class withLoading extends React.Component<P & WithLoadingProps> {
render() {
const { loading } = this.props;
console.log(loading);
return {loading} ? <Spinner /> : <Component {...this.props} />;
}
};
}
const mapStateToProps = (state) => {
const loginReducer : ILoginState = state.loginReducer;
return {
loading: loginReducer.loading,
}
}
const composedWithLoading = compose(
connect(mapStateToProps, null),
withLoading
)
export default composedWithLoading;
但是,当我尝试将包装的组件显示到FormGroup.tsx中时,出现错误'TypeScript错误:JSX元素类型'RegisterForms'没有任何构造或调用签名。 TS2604' FormGroup.tsx:
import React from "react";
import LoginFooter from "./LoginFooter";
import { SignInUser } from "../../../models/SignInUser";
import LoginForms from "./LoginForms";
import RegisterForms from "./RegisterForms";
interface IProps {
inAccount: (user: SignInUser) => void;
}
interface IState {
userName?: string;
login?: string;
password?: string;
}
class FormGroup extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
userName: null,
login: "",
password: ""
} as IState;
}
async setUserName(event) {
this.setState((await {userName: event.target.value}) as IState);
}
async setEmail(event) {
this.setState((await { login: event.target.value }) as IState);
}
async setPassword(event) {
this.setState((await { password: event.target.value }) as IState);
}
signIn(userState: SignInUser): void {
let user: SignInUser = {
login: userState.login,
password: userState.password,
userName: userState.userName
};
this.props.inAccount(user);
}
render() {
return (
<form
onChange={event => {
if ((event.target as HTMLElement).id === 'name' ) {
this.setUserName(event);
}
(event.target as HTMLElement).id === "password"
? this.setPassword(event)
: this.setEmail(event);
}}
>
{document.location.pathname !== "/login" ? (
<RegisterForms hasRegisterErrors={false}/> // ERROR IS HERE
) : (
<LoginForms />
)}
<button
className="btn btn-primary btn-block"
type="button"
onClick={() => this.signIn(this.state as SignInUser)}
>
Login
</button>
<LoginFooter />
</form>
);
}
}
export default FormGroup;
请帮助我,因为我不知道为什么会这样。谢谢!