React + typescript -参考打字错误

amrnrhlw  于 2022-12-27  发布在  TypeScript
关注(0)|答案(2)|浏览(117)

我见过许多其他问题与我的问题相同,我尝试了所有的解决方案,但都不起作用。我有一个包含许多输入的表单,我在FloatingLabelInputs中定制了它。它们有一个名为resetState的公共方法,我想调用它。下面是我的表单组件的外观:

class EditModalPage extends React.Component<Props, State> {
  fieldsRefs: React.RefObject<FloatingLabelInput>[] = fields.map(() => React.createRef());

  render() {
    return fields.map((fieldData, index) => (
      <FloatingLabelInput
        name={fieldData.name}
        ref={this.fieldRefs[index]}
      />
    ));
  }
}

const fields = [
  { name: 'test' }
];

从我在其他问题中看到的情况来看,这应该可以工作,因为我已经使用React.RefObject键入了fieldsRefs属性。然而,它没有工作,TypeScript给我的错误如下:

Type 'RefObject<FloatingLabelInput>' is not assignable to type 'string | (string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (RefObject<FloatingLabelInput> & string) | (RefObject<FloatingLabelInput> & ((instance: HTMLInputElement | null) => void)) | ... 5 more ... | undefined'.
  Type 'RefObject<FloatingLabelInput>' is not assignable to type '((instance: FloatingLabelInput | null) => void) & RefObject<HTMLInputElement>'.
    Type 'RefObject<FloatingLabelInput>' is not assignable to type '(instance: FloatingLabelInput | null) => void'.
      Type 'RefObject<FloatingLabelInput>' provides no match for the signature '(instance: FloatingLabelInput | null): void'.

如果我尝试console.log(this.fieldsRefs),一切都在工作,虽然。我只是得到错误,并被迫铸造as any

l7wslrjt

l7wslrjt1#

您应该检查<FloatingLabelInput />组件的props接口:看起来它需要一个类型为RefObject<HtmlInputElement>的引用,而您试图给予它一个RefObject<FloatingLabelInput>
您应该尝试将类型从React.RefObject<FloatingLabelInput>更改为React.RefObject<HtmlInputElement>

ar5n3qh5

ar5n3qh52#

尝试这种类型:第一个月

相关问题