Reactjs 如何在传单地图中添加绘图工具栏（React应用程序）

这是我的Dashnoard.js文件，我没有html文件。我的问题是如何在传单地图上添加绘图工具栏。目前我只有地图

谢谢大家!

import React from 'react' 
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'
import { compose } from 'redux' 
import "leaflet/dist/leaflet.css"; 
import  L from 'leaflet';



export class Dashboard extends React.Component{

    constructor() {
        super();
        this.state = {
          lat: 42.696295,
          lng:  23.303643,
          zoom: 10,
        };
      }

  render() {


    const position = [this.state.lat, this.state.lng]



    return(
        <div className='dashboard container'>
            <Map id="map" style={{ height: "50vh" }} center={position} zoom={13}>
            <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
        </div>
    )
       } }

export default compose()(Dashboard);

从“React”导入React
从“反应传单”导入{Map，Marker，Popup，tillelayer}
从“redux”导入{compose}
导入“传单/目录/传单.css”；
从“传单”进口L；
导出类仪表板扩展了React.Component{
构造函数（）{
超级（）；
此.state={
拉脱维亚：42.696295，
液化天然气：23.303643，
缩放：10，
};
}
render（）{
const position=[this.state.lat，this.state.lng]
返回(
一个漂亮的CSS3弹出窗口。
可轻松定制。
)
} }
导出默认组合（）（仪表板）；

我已成功初始化页面上的映射，但在下一步，我无法初始化一个绘图组件并设置为映射

---

在github页面上解释了我的情况，你能帮忙吗