如何修復 typescript 錯誤類型“string”不可分配給類型“Ref”<inputref> | 不明確的'？</inputref>

Question

為什么編譯失敗？？

C:/Users/danie/OneDrive/Desktop/Project/seller-app/src/components/ui/maps/places-autocomplete.tsx
TypeScript error in C:/Users/danie/OneDrive/Desktop/Project/seller-app/src/components/ui/maps/places-autocomplete.tsx(12,55):
Type 'string' is not assignable to type 'Ref<InputRef> | undefined'.  TS2322

    10 |   )
    11 |   return (
  > 12 |     <Input placeholder='Start typing or move the map' ref='autoCompleteRef' />
       |                                                       ^
    13 |   )
    14 | }
    15 |

此錯誤發生在構建期間，無法消除。

完整的源代碼：

import { Input } from "antd"
import React, { useRef } from "react"

const PlacesAutocomplete = () => {
  const autoCompleteRef = useRef(null)

  const autoComplete = new (window as any).google.maps.places.Autocomplete(
    autoCompleteRef.current,
    { types: ["(cities)"], componentRestrictions: { country: "us" } }
  )
  return (
    <Input placeholder='Start typing or move the map' ref='autoCompleteRef' />
  )
}

export default PlacesAutocomplete

錯誤信息：

  Type 'string' is not assignable to type 'Ref<InputRef> | undefined'.ts(2322)
  index.d.ts(133, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & InputProps & RefAttributes<InputRef>'

index.d.ts(133, 9)中配置字符串的源碼：

interface RefAttributes<T> extends Attributes {
    ref?: Ref<T> | undefined;
}

Answer 1

ref 應該是 object 而不是字符串。 ref={autoCompleteRef}