reactjs - Typescript-virhe tulee, kun komponentille, jonka HOC-wrapperi on jo antanut, ei lähetetä Props-arvoja

Minulla on vanhempi komponentti, joka välittää 3 propia lapsikomponentille:

Class Invite extends Component {
    ...//

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

Lapsikomponentillani on lisäksi sitä ympäröivä HOC-kääre:

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);

Minulla on kohdattuna 'instric Attributes' -virhe, kuten seuraavasti:

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

Oletan, että se johtuu siitä, että se odottaa vanhemman komponentin välittävän kaikki ominaisuudet, joita lapsikomponentti odottaa rajapintamääritelmien perusteella.

Mutta minulla on vaikeuksia, koska lapsikomponentin ympärille kääritty HOC lisää jo nämä propsit. Kuinka ilmoitan vanhemmalle komponentille, että se voi turvallisesti ohittaa vaatimuksen, jonka mukaan HOC:n tarjoamia propseja ei tarvitse välittää?

Vastaus #1

Yläkomponentin täytyy silti välittää tarvittavat propsit, mutta ne voivat olla null tai undefined. Jos eivät, voit tehdä niistä valinnaisia rajapinnassasi.