我已经遵循文档，但我得到了错误

Question

我想学习有关反应的小册子。我是react js/tailwind CSS和传单的初学者。但是，我按照他们的官方文档，仍然得到了这些错误的设置本身。我哪里做错了?

import React from "react";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import "./App.css";
function App() {
return (
<div id="map" className="h-180px">
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.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>
</div>
);
}

ERROR I got:

Compiled with problems:X
ERROR
[eslint] 
srcApp.tsx
Line 13:10:  'Marker' is not defined  react/jsx-no-undef
Line 14:12:  'Popup' is not defined   react/jsx-no-undef
Search for the keywords to learn more about each error.

ERROR
[eslint] 
srcApp.tsx
Line 13:10:  'Marker' is not defined  react/jsx-no-undef
Line 14:12:  'Popup' is not defined   react/jsx-no-undef
Search for the keywords to learn more about each error.

ERROR in src/App.tsx:13:10
TS2304: Cannot find name 'Marker'.
11 |           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
12 |         />
> 13 |         <Marker position={[51.505, -0.09]}>
|          ^^^^^^
14 |           <Popup>
15 |             A pretty CSS3 popup. <br /> Easily customizable.
16 |           </Popup>

ERROR in src/App.tsx:14:12
TS2304: Cannot find name 'Popup'.
12 |         />
13 |         <Marker position={[51.505, -0.09]}>
> 14 |           <Popup>
|            ^^^^^
15 |             A pretty CSS3 popup. <br /> Easily customizable.
16 |           </Popup>
17 |         </Marker>

ERROR in src/App.tsx:16:13
TS2304: Cannot find name 'Popup'.
14 |           <Popup>
15 |             A pretty CSS3 popup. <br /> Easily customizable.
> 16 |           </Popup>
|             ^^^^^
17 |         </Marker>
18 |       </MapContainer>
19 |     </div>

ERROR in src/App.tsx:17:11
TS2304: Cannot find name 'Marker'.
15 |             A pretty CSS3 popup. <br /> Easily customizable.
16 |           </Popup>
> 17 |         </Marker>
|           ^^^^^^
18 |       </MapContainer>
19 |     </div>
20 |   );

我添加了typescript，顺风CSS和传单与create-react-app。(抱歉，如果我的提问模式不正确。我是一个新手。p -l-e-a-s-e)

Answer 1

您错过了从react-leaflet导入Marker和Popup。试试下面的代码:

import React from "react";
import { MapContainer, TileLayer, useMap, Marker, Popup } from "react-leaflet";
import "./App.css";
function App() {
return (
<div id="map" className="h-180px">
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.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>
</div>
);
}
export default App