如何解决“ TypeScript错误：JSX元素”

Question

我想在与打字稿应用程序互动时做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;

请帮助我，因为我不知道为什么会这样。谢谢！