传单上的第 'IntrinsicAttributes & MapContainerProps' 类中不存在属性'center'

Question

我正试图在我的应用程序上实现一个简单的映射，但在使用下面React传单中的示例代码时遇到了这个错误。

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
export default function App() {
return (
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
);
}

错误：

Type '{ children: Element[]; center: number[]; zoom: number; scrollWheelZoom: boolean; }' is not assignable to type 'IntrinsicAttributes & MapContainerProps'.
Property 'center' does not exist on type 'IntrinsicAttributes & MapContainerProps'.  TS2322
150 |                     />
151 | 
> 152 | <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
|               ^
153 |   <TileLayer
154 |     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
155 |     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

我正在使用React和Typescript。

Answer 1

尝试安装传单类型：

yarn add -D @types/react-leaflet

然后重新启动您的项目。

Answer 2

我的问题是，即使我安装了react传单类型，我仍然需要安装传单类型：

npm i -D @types/leaflet

Answer 3

2023更新我必须安装两种类型(反应传单和传单(

npm i -D @types/leaflet @types/react-leaflet

https://react-leaflet.js.org/docs/start-installation/#typescript-支持