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

Question

我在下面的 TypeScript 代码中收到错误“JSX 元素类型'GoogleMapReact'没有任何构造或调用签名.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-map s -react库，但您正在使用该组件，就好像您正在使用google-map-react (map 而不是 maps)一样。

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