文章/答案/技术大牛

发布

社区首页 >问答首页 >Typescript react处理道具类型

问Typescript react处理道具类型
EN

Stack Overflow用户

提问于 2018-05-16 14:42:48

回答 1查看 444关注 0票数 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>
    )
  }
);

这里的问题是，当我使用这个组件时，我需要传递prop " data "，如果console.log(props)我可以看到我的数据prop被正常传递，但由于我正在使用typescript，typescript现在不会关于这个属性，它会给我这样的错误：

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

基本上，我为此创建接口并声明我的数据属性，然后创建react组件，如下所示：

const GoogleMapComponent: React.ComponentClass<IProps>

然后我就可以访问必要的道具了。这里的问题是，如果我试图传递接口IProps，我会得到这样的结果：

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

我相信这是因为compose方法。

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

reactjs

typescript

react-google-maps

recompose

回答 1

Stack Overflow用户

发布于 2018-05-16 15:34:13

如果你在传递给compose的函数组件中输入道具，它会起作用吗?例如：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50364022

复制

相似问题

问Typescript react处理道具类型
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Typescript react处理道具类型EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Typescript react处理道具类型
EN