reactjs - 反应，带有打字稿错误的redux：类型'{}'缺少类型'IPops'中的以下属性：电子邮件，令牌

问题描述

我正在将 HOC 与 redux 一起使用，并且一直遇到错误：类型“{}”缺少类型“IPops”中的以下属性：电子邮件、令牌。HOC 应该将 props（电子邮件和令牌）和状态注入到 Lower 组件。但在这种情况下，它并没有通过它们。并且包装函数（withLogin）不会出现在开发工具的反应树组件中。

我的 HOC 包含函数（withLogin.tsx）如下所示：

import * as React from "react";
import { connect, MapStateToProps } from "react-redux";
import { Dispatch } from 'redux';
import { propagateError } from "./actions";
import { Diff } from 'utility-types';

export interface IWithLoginProps {
  email: string;
  token: string;
}

type HocProps = 
   IDispatchProps & {
     // here you can extend ConnectedHoc with new props
      users: string
   };

interface IDispatchProps {
  cleanError(): void;
}

export default function WithLogin<T extends IWithLoginProps>(
  BaseComponenet
): React.ComponentType<HocProps> {
  class HOC extends React.Component<
  HocProps,
    {
      hash: string;
    }
  > {
    constructor(props) {
      super(props);
      this.state = {
        hash: window.top.location.hash          
       };
    }

    render() {
      return <BaseComponenet {...this.state} {...this.props} />;
    }
  }

  const mapDispatchToProps = (dispatch: Dispatch): IDispatchProps => {
    return {
      cleanError: () => dispatch(propagateError(null))
    };
  };

  // @ts-ignore
  return connect<{}, IDispatchProps, Diff<HocProps, IWithHistoryProps>, {}>(
    null,
    mapDispatchToProps
  )(HOC);
}

我的 BaseComponent(App.tsx) 看起来像：

import React from "react";
import { connect } from "react-redux";
import { withLoginProps } from "./withLogin";

interface IStateProps {
  usernames: string[];
}

interface IProps extends IWithLoginProps {}

const App: React.StatelessComponent <IProps & IStateProps> = (props) => {
  return (
    <div>
        {props.users}
    </div>
  );
}

const mapStateToProps = (state: IRootState): IStateProps => {
  return {
    usernames: state.users
  };
};

export default connect<IStateProps, null, null, IRootState>(
  mapStateToProps, null)(withLogin(App));

我的 index.tsx：

import * as React from 'react';
import App from './App';

  const Root: React.StatelessComponent<{}> = () => (
    <div>
      <Provider store={store}>
          <App />
      </Provider>
    </div>
  );
  render(<Root />, document.getElementById(renderRoot));
};

标签： reactjstypescriptredux

reactjs - 反应，带有打字稿错误的redux：类型'{}'缺少类型'IPops'中的以下属性：电子邮件，令牌

问题描述

解决方案

推荐阅读