0

我正在为 Google 地图 api 使用 react-google-maps 库。根据文档，这是我使用地图的方式：

const GoogleMapComponent: React.ComponentClass<{}> = compose(
  withProps({
    googleMapURL: "url",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) => {
  const {data} = props;
  return(
      <GoogleMap
        defaultZoom={9}
        defaultCenter={{ lat: -34.397, lng: 150.643 }}
      >
        <HeatmapLayer />
      </GoogleMap>
    )
  }
);

这里的问题是，当我使用这个组件时，我需要传递道具“数据”，如果 console.log(props) 我可以看到我的数据道具是正常传递的，但是由于我使用的是打字稿，打字稿现在不涉及这个道具，它给了我这样的错误：

Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState, any>> & Readonly<{

基本上我为此创建接口并声明我的数据道具，并创建这样的反应组件：

const GoogleMapComponent: React.ComponentClass<IProps>

然后我可以访问必要的道具。这里的问题，如果我尝试通过接口 IProps，我得到这个：

Type '{ children?: ReactNode; }' has no property 'data' and no string index signature.

我相信这是因为 compose 方法。

我认为，这里的问题更多是关于 react-google-maps 库及其与 Typescript 的使用，因为我相信它应该在任何其他情况下都可以使用。但可能不是，也许以其他方式声明我的组件有一个技巧。

4

1 回答 1

0

如果您在传递给撰写的功能组件中键入道具，它是否有效，例如：

const GoogleMapComponent = compose(
  withProps({
    googleMapURL: "url",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props: IProps) => {
  const {data} = props;
  return(
    <GoogleMap
      defaultZoom={9}
      defaultCenter={{ lat: -34.397, lng: 150.643 }}
    >
      <HeatmapLayer />
    </GoogleMap>
  );
});
于 2018-05-16T07:34:12.607 回答