reactjs - 當沒有向已被 HOC 包裝的組件傳遞 Props 時，出現 Typescript 錯誤

我有一個父組件，它向子組件傳遞三個屬性：

Class Invite extends Component {
    ...//

    render() {
        return 
          <div>
            <SignUpForm
              data={data}
              refetch={refetch}
              submitForm={this.handleSubmit}
            />
          <div>
    }

我的子組件此外還有一個 HOC 包裹它：

export interface SignUpFormProps extends FormComponentProps {
  email: string;
  firstName: string;
  lastName: string;
  password: string
}

interface DataProps {
  refetch: any,
  data: Data,
  submitForm: any

}




class DesignerSignUpForm extends Component<SignUpFormProps & DataProps> {

    render() {
        return (...////);
    }

export default Form.create<SignUpFormProps>({ name: 'sign_up' })(SignUpForm);

我遇到了一個這樣的內部屬性錯誤：

  Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<SignUpFormProps, "email" | "firstName" | "lastName" | "password" | "wrappedComponentRef">, any, any>> & Readonly<...> & Readonly<...>'.ts(2322)

我假設這是因為它期望父組件傳入子組件從介面定義中所期望的所有屬性。

但我很困擾，因為包裹在子組件周圍的高階組件（HOC）已經會注入這些屬性。我該如何讓父組件知道可以安全地忽略由 HOC 提供的屬性不需要傳遞的要求？

答案＃1

父組件仍然必須傳遞所需的 props，但它們可以為 null 或 undefined。如果不是，你可以在你的介面中將它們設為可選。