Question

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

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>
    )
  }
);

这里的问题是，当我使用这个组件时，我需要传递prop“data”，如果console.log（props）我可以看到我的数据道具正常传递，但由于我使用的是typescript，typescript不会现在关于这个道具，它给了我这样的错误：

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.

我认为这是因为撰写方法。

我认为，这里的问题更多的是反应 - 谷歌地图库及其与Typescript的用法，因为我相信它应该适用于任何其他情况。但可能不是，也许以其他方式声明我的组件有一个技巧。

Answer 1

如果您在传递的功能组件中键入道具，例如：

，它是否有效

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>
  );
});

打字稿反应处理道具类型

1 个答案: