reactjs - React Leaflet.draw：如何在不使用 react-leaflet 工具栏的情况下使用标准按钮创建绘图功能，但是，将其写在“React”中

Question

如何在单独的控制框中创建驻留在传单地图上的自定义按钮，以创建“折线”、“多边形”或“标记”，这些按钮都将位于单独的按钮上，而无需使用传单绘制 标准 UI 工具栏。我真的很想知道如何用“React”方式与 Vanilla Javascript 编写它，因为我的整个程序都是用 React 编写的。如果有人可以编写一个简单的程序，展示如何在 React 中使用单独的按钮绘制“折线、多边形”等，将不胜感激。

这是我的一些代码的片段。谢谢

<Map
  zoomControl={false}
  center={position}
  zoom={this.state.zoom}
  className={classes.height}
  ref={m => {
    this.leafletMap = m;
  }}>
  {/* LAYER CONTROL ON TOP OF MAP*/}
  <LayersControl position="topright">
    <BaseLayer checked name="OpenStreetMap.Mapnik">
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </BaseLayer>
    <BaseLayer name="OpenStreetMap.BlackAndWhite">
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                     url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
      />
    </BaseLayer>
  </LayersControl>

**CALLS OTHER COMPONENT WHICH RENDERS FEATUREGROUP, EDITCONTROL**
**<Mapediting save={this.setSave} myIcon={myIcon} />**

  <ZoomControl position="topright" />
    <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  {/* show users general area */}
  <Marker position={position} icon={myIcon} title="Your Position" draggable={true}>
  {/* <Popup>
        Your Mapped Location <br /> Lat: {this.state.location.lat} 
                                    Long: {this.state.location.lng}  
      </Popup> */}
  </Marker>
</Map>

其他组件

const mapSelectors = myIcon => (
    <FeatureGroup>
        <EditControl
            style={{ backgroundColor: "blue" }}
            onCreated={event => _onCreate(event)}
           

            draw={{
                polyline: {
                    shapeOptions: { color: "red" },
                    allowIntersection: false,
                    showLength: true,

                    metric: false,
                    feet: false
                },
                polygon: {
                    allowIntersection: false,
                    shapeOptions: { color: "blue" },
                    edit: false,
                    showLength: true,
                    metric: false,
                    feet: false,
                    showArea: true
                },
                rectangle: {
                    shapeOptions: { color: "green" },
                    showLength: true,
                    metric: false,
                    feet: false,
                    showArea: true
                },
                circle: {
                    shapeOptions: { color: "magenta" },
                    showLength: true,
                    metric: false,
                    feet: false,
                    showArea: true
                },
                marker: { zIndexOffset: "999", edit: true, icon: myIcon }
            }}
        />
        {/* {(L.drawLocal.draw.toolbar.buttons.polygon = "draw")} */}

        <Circle center={[51.51, -0.06]} radius={200} />
    </FeatureGroup>
);

class MapEditing extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            draw: false
        };
    }
 render() {
        const { classes, save, myIcon } = this.props;

        return (
            
                        {this.state.draw && mapSelectors()}
)
``` Additional form code not shown