Question

我在我的React应用程序中使用Flow.js。

在其中，我创建了自定义Form组件React.Component：

import * as React from 'react'

class Form extends React.Component<FormProps, FormState> {
  // utils for form-handling logic in my form components
}

以下是我的表单类型：

export type ValidationResult = Array<string>
export type Validator = (value: any) => string | false

export type CompositeValidationResult = { [string]: ValidationResult };

export type FormData = { [string]: any };
export type FormErrors = { [string]: ValidationResult };
export type FormValidators = { [string]: Array<Validator> };

export type FormSetErrors = (FormErrors) => void
export type FormSetSubmitting = (boolean) => void
export type FormOnClean = (FormData, FormValidators, FormSetErrors) => FormData | false
export type FormOnSubmit = (FormData, FormSetSubmitting, FormSetErrors) => void

export type FormProps = {
  initialData: FormData,
  validators?: FormValidators,
  onClean: FormOnClean,
  onSubmit: FormOnSubmit
}

export type FormState = {
  isSubmitting: boolean,
  data: FormData,
  errors: FormErrors
}

到目前为止一切顺利！

现在，我尝试从另一个组件SignInForm继承我的表单。此表单与Form的不同之处在于它需要一个属性onHide属性。只是在我的组件中使用此prop就会出现以下错误：

Error: js/containers/SignInForm/SignInForm.js:20
 20:     const { onHide } = this.props
                 ^^^^^^ property `onHide`. Property not found in
 20:     const { onHide } = this.props
                            ^^^^^^^^^^ FormProps

好的，按预期工作，现在让我们为扩展道具创建自定义类型：

type Props = {
  onHide: () => void
}

class SignInForm extends Form {
  props: FormProps & Props

  // some SignInForm specific stuff
}

但这会产生以下错误：

 10: class SignInForm extends Form {
           ^^^^^^^^^^ SignInForm. Cannot extend
 10: class SignInForm extends Form {
                              ^^^^ Form
  Property `props` is incompatible:
      6: class Form extends React.Component<FormProps, FormState> {
                                            ^^^^^^^^^ FormProps. This type is incompatible with. See: js/components/Form/Form.js:6
     11:   props: FormProps & Props
                              ^^^^^ Props
      Property `onHide` is incompatible:
         11:   props: FormProps & Props
                                  ^^^^^ property `onHide`. Property not found in
          6: class Form extends React.Component<FormProps, FormState> {
                                                ^^^^^^^^^ FormProps. See: js/components/Form/Form.js:6

我也尝试过其他方式：

type Props = {
  onHide: () => void
}

class SignInForm extends Form<FormProps & Props, FormState> {
  // ...
}

但这导致更长的错误：

Error: js/containers/SignInForm/SignInForm.js:10
 10: class SignInForm extends Form<FormProps & Props, FormState> {
           ^^^^^^^^^^ SignInForm. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:10
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:10
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ variance check: `Form`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:12
 12:     this.onChange('username', ev.currentTarget.value)
         ^^^^^^^^^^^^^ property `onChange`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:16
 16:     this.onChange('password', ev.currentTarget.value)
         ^^^^^^^^^^^^^ property `onChange`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:20
 20:     const { onHide } = this.props
                            ^^^^^^^^^^ property `props`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:21
 21:     const { data, errors, isSubmitting } = this.state
                                                ^^^^^^^^^^ property `state`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:25
 25:         <form onSubmit={this.onSubmit}>
                             ^^^^^^^^^^^^^ property `onSubmit`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

据我所知，虽然React.Component可能是通用类型，但Form不是，但我不知道如何从这里继续。我一直想知道是否可以通过以下方式建议兼容类型：

class Form extends React.Component<P:FormProps, S:FormState>

但这是语法错误。

所以我在这里失去了寻找解决方案，但到目前为止，我的搜索结果都没有。

如何创建扩展React.Component的泛型类？

0 个答案: