Question

我有一个父组件，该组件将3个道具传递给一个子组件：

    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提供的道具的要求？

Answer 1

父组件仍必须传递所需的道具，但它们可以为null或未定义。如果没有，您可以在界面中将它们设为可选。

不将道具传递到HOC包装器已经提供的组件时出现Typescript错误

1 个答案: