为 react-component 提供传单地图

Question

我正在使用 react-leaflet 来渲染 map。 我创建了一个具有地图属性的组件：

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

现在我尝试在我的应用程序中使用该组件：

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;

但是我不知道如何将 MapContainer 中的MapContainer提供到我的Car组件中。 使用上面的代码我得到以下错误：

TS2322：类型'{ map：字符串； }' 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'。 类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'。

Answer 1

useMap只能在本身是<MapContainer>的子/后代的组件中使用。 https://react-leaflet.js.org/docs/api-map/#usemap

在 MapContainer 的任何后代中提供 Leaflet Map 实例的MapContainer 。

您的<Layout>组件呈现这样的<MapContainer> ，但不在一个内。

但是，您可以简单地在<Car>的主体中使用useMap

话虽如此，如果您保持<Car>组件基于类，它可能不会起作用。 您可能必须将其转换为功能组件，或使用旧版本的 React Leaflet (2)。