如何在React中将道具传递给HOC

时间:2020-02-13 18:56:49

标签: reactjs typescript

withLoader HOC组件:

const withLoader = (WrappedComponent: any) => (props: any) => {
  if (props.loading) {
    return (
      <Styled.LoaderWrapper>
        <Styled.LoaderContent>
          <Styled.Fa icon={faSpinner} spin />
        </Styled.LoaderContent>
      </Styled.LoaderWrapper>
    );
  }
  return <WrappedComponent {...props} />;
};

export default withLoader;

Login.tsx组件:

const LoginPage = () => {
  const [login, setLogin] = useState<string>('');
  const [password, setPassword] = useState<string>('');

  const authUser = (): void => {
    dispatch(getJWT(login, password));
  };

  return (
    // markup goes here
  );
};

export default withLoader(LoginPage);

现在我不明白了。当我在authUser()中调度动作时,我想显示装载程序(高阶组件),例如:

const authUser = (): void => {
  // there we start showing loader
  dispatch(getJWT(login, password)); // this action sends a POST request with credentials, then receives an access_token
  // there we end showing loader
};

我实际上如何将loading道具传递给我的HOC?

0 个答案:

没有答案