Question

我试图写一个ReactXP HOC。

这是代码（为了清晰起见而大大简化）：

interface withAuthState {
         //
        }

interface withAuthProps {
         //
        }

const withAuth = <P extends withAuthProps, S extends withAuthState>(
          WrappedComponent: new () => RX.Component<P, S>
        ) =>
          class WithAuth extends RX.Component<P & withAuthProps, S & withAuthState> {
            constructor(props) {
              super(props);
          }

            render() {

              return (
                  <WrappedComponent
                    {...this.props}
                  />
              );
            }
          }
export default withAuth;

现在是消费者：

interface signUpProps {
//
}

interface signUpState {
//
}

class SignUp extends RX.Component<signUpProps, signUpState> {
  constructor(props) {
    super(props);
  }
  render() {
    return (<RX.View ... />);
  }
};

export default WithAuth(SignUp);

此最后一个导出指令无法编译，并显示以下错误消息：

Argument of type 'typeof SignUp' is not assignable to parameter of type 'new () => Component<withAuthProps, withAuthState>'

有很多可能的解决方案，但它们似乎都不适合我。

任何帮助表示赞赏。谢谢你的到来。

Answer 1

您为WrappedComponent状态键入注释，该注释应该是一个带0参数的构造函数。我的猜测是你想要一个构造函数，它将props作为构造函数的参数：

const withAuth = <P extends withAuthProps, S extends withAuthState>(
  WrappedComponent: new (props: P) => RX.Component<P, S>
) =>
class WithAuth extends RX.Component<P & withAuthProps, S & withAuthState> {
  constructor(props: P) {
    super(props);
  }

  render() {

    return (
      <WrappedComponent
        {...this.props}
      />
    );
  }
}

//Usage: 

interface withAuthProps {
  auth: boolean
}

interface signUpProps extends withAuthProps {
  test: string;
}
interface signUpState extends withAuthState{}

class SignUp extends RX.Component<signUpProps, signUpState> {
  constructor(props: signUpProps) {
    super(props);
  }
  render() {
    return <div />;
  }
}

const _SignUp = withAuth(SignUp);
let d = <_SignUp test="" auth={true} /> // Will have props from signUpProps

使用TypeScript编写的ReactXP高阶组件遇到问题

1 个答案: