Typescript реагирует на типы реквизита - PullRequest
Новая
       21

Typescript реагирует на типы реквизита

0 голосов
/ 16 мая 2018

Я использую библиотеку реагировать-google-maps для API карт Google.Согласно документации, вот как я использую карты: 

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», если 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.

Я думаю, здесь вопрос больше в том, чтобы отреагировать на библиотеку google-maps и ее использование с Typescript, как я считаю, должно работать в любом другом случае.Но может быть и нет, может быть есть хитрость в объявлении моего компонента другим способом.

1 Ответ

0 голосов
/ 16 мая 2018

Работает ли это, если вы набираете реквизиты в функциональном компоненте, который вы передаете, например: 

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