Estoy usando react-leaflet para representar un mapa. Creé un componente que tiene una propiedad de mapa:
import * as React from 'react'; import { Map, FeatureCollection } from 'leaflet'; class Car extends React.Component { state = { map: Map, collection: FeatureCollection } constructor(props) { super(props); this.state = { map: props.map, collection: props.collection } }Ahora trato de usar ese componente dentro de mi aplicación:
import React, { useState } from 'react'; import { MapContainer, useMap } from 'react-leaflet'; import Car from './Car'; function Layout() { return ( <div> <MapContainer bounds={[[52.475,13.3], [52.477,13.5]]} zoom={12}> <Car map={ useMap() }/> </MapContainer> </div> ) } export default Layout; Sin embargo, no sé cómo proporcionar el mapa de MapContainer a mi componente Car . Usando el código anterior me sale el siguiente error:
TS2322: escriba '{mapa: cadena; }' no se puede asignar al tipo 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. La propiedad 'mapa' no existe en el tipo 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
useMap solo se puede usar dentro de un componente que es en sí mismo un hijo/descendiente de <MapContainer> . https://react-leaflet.js.org/docs/api-map/#usemap
Enlace que proporciona la instancia de Leaflet Map en cualquier descendiente de un
MapContainer.
Su componente <Layout> representa tal <MapContainer> , pero no está dentro de uno.
Sin embargo, simplemente puede usar useMap en el cuerpo de <Car>
Dicho esto, probablemente no funcionará si mantiene su componente <Car> basado en la clase. Probablemente tendrá que convertirlo en un componente funcional o usar una versión anterior de React Leaflet (2).