如何使用connect,createReduxForm和Typescript将道具传递到HOC?

时间:2019-12-11 03:56:12

标签: javascript angular reactjs typescript redux-form

如何使用连接,createReduxForm和打字稿将道具传递到React功能组件中?

Im使用redux形式和打字稿的混合物。我有一个要传递道具的子组件,但我不断收到类型错误,没有找到解决方法的路径。这是代码。

BirthdayPage.tsx

interface propsInterface {
  match?: any;
}

const BirthdayPage = ({ match: { params } }: propsInterface) => {
  const userId = params.id;
  return (
    <AppWrapper
    >
      <MyBirthdayForm userId={userId} />
    </AppWrapper>
  );
};

export default BirthdayPage;

MyBirthdayForm.tsx

interface propsInterface {
  saveMyBirthday?: any;
  userId?: string
}

function onSubmit() {
  console.log('toot toot');
}

const MyBirthdayForm = ({
  saveMyBirthday,
  userId
}: propsInterface) => {
  const token = userId == 'selectedUser';

  return (
    <>
      <Typography variant='h1'>
        {token}
      </Typography>

      <form
        onSubmit={handleSubmit(onSubmit)}
      >
        <BirthdayForm token={token} />
        <AppButtons
          onSubmit={handleSubmit(onSubmit)}
          rightButtonText={'Submit'}
        />
      </form>
    </>
  );
};

interface propsMatchInterface {
  saveMyBirthday: any;
}

const mapDispatchToProps: propsMatchInterface = {
  saveMyBirthday,
};

const createReduxForm: any = reduxForm({
  form: 'test'
});

export default connect<any>(
  null,
  mapDispatchToProps,
)(createReduxForm(MyBirthdayForm));

为什么我继续收到此错误?

Type '{ userId: any; }' is not assignable to type '(IntrinsicAttributes & Pick<unknown, never>) | (IntrinsicAttributes & Pick<Pick<unknown, never>, never> & Pick<InferProps<unknown>, never>) | (IntrinsicAttributes & ... 2 more ... & Partial<...>) | (IntrinsicAttributes & ... 2 more ... & Partial<...>)'.
  Property 'userId' does not exist on type '(IntrinsicAttributes & Pick<unknown, never>) | (IntrinsicAttributes & Pick<Pick<unknown, never>, never> & Pick<InferProps<unknown>, never>) | (IntrinsicAttributes & ... 2 more ... & Partial<...>) | (IntrinsicAttributes & ... 2 more ... & Partial<...>)

0 个答案:

没有答案