JSX 元素类型 'GoogleMapReact' 没有任何构造或调用 signatures.ts(2604)

Question

我在下面的 TypeScript 代码中收到错误 "JSX element type 'GoogleMapReact' does not have any construct or call signatures.ts(2604)"。我该如何解决这个问题？

import React, { useState } from "react";
import GoogleMapReact from "google-maps-react";

const AnyReactComponent = ({ text }: any) => <div>{text}</div>;

const SimpleMap = (props: any) => {
  const [center, setCenter] = useState({ lat: 11.0168, lng: 76.9558 });
  const [zoom, setZoom] = useState(11);
  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "XXXXXXXXXXXXXXXXXXXX" }}
        defaultCenter={center}
        defaultZoom={zoom}
      >
        <AnyReactComponent lat={11.0168} lng={76.9558} text="My Marker" />
      </GoogleMapReact>
    </div>
  );
};

export default SimpleMap;

Answer 1

您正在导入 google-maps-react library, but you are using the component as if it you were using google-map-react （地图而不是地图）。

假设您要使用 google-map-react：删除 google-maps-react 依赖项，安装 google-map-react 并更改代码中的导入。

JSX 元素类型 'GoogleMapReact' 没有任何构造或调用 signatures.ts(2604)

JSX element type 'GoogleMapReact' does not have any construct or call signatures.ts(2604)

javascript

reactjs

google-maps-react