反应打字本单张:无法切换按钮

Question

在一个web +类型记录web应用程序中，我希望能够以编程方式显示/隐藏传单绘制的“绘制折线”按钮。

为了执行此任务，我对EditControl的绘图属性进行了操作，如本例(代码沙箱位于：https://codesandbox.io/s/leaflet-toggle-button-0hbr0?file=/src/MyMap.tsx:0-1257 )

import React, { useState } from "react";
import { MapContainer, TileLayer, FeatureGroup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";
import { EditControl } from "react-leaflet-draw";
import "leaflet-draw";

const MyMap = () => {
  const [showButton, setShowButton] = useState<boolean>(true);

  return (
    <>
      <button
        onClick={() => {
          setShowButton((oldValue) => !oldValue);
        }}
      >
        Toggle
      </button>
      <p>{"Show button: " + showButton}</p>
      <MapContainer
        center={[37.8189, -122.4786]}
        zoom={13}
        style={{ height: "300px" }}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <FeatureGroup>
          <EditControl
            position="topright"
            draw={{
              rectangle: false,
              circle: false,
              circlemarker: false,
              polygon: false,
              marker: false,
              polyline: showButton
            }}
          />
        </FeatureGroup>
      </MapContainer>
    </>
  );
};

export default MyMap;

该按钮最初显示，单击"Toggle“按钮后，它将正确消失。

不幸的是，再次按下"Toggle“按钮，它就不再出现了。

实现正确行为的正确途径是什么？

编辑:根据https://github.com/Leaflet/Leaflet.draw#user-content-example-leafletdraw-config的说法，

，您可以在初始化后通过使用Leaflet.draw控件上的setDrawingOptions方法更改绘图处理程序选项。

不幸的是，我也没有设法调用该方法。

Answer 1

我也有过类似的问题。

作为一种解决办法，我使用一个附加的键设置“绘制”选项，这个键总是不同的，可以绕过prevProps与道具检查。见下文：

setDrawOptions({
  ...drawOptions,
  polyline: showButton
  bugWorkaround: Math.random(), // TODO remove when lib bug is fixed
});

这真的很烦人，但在修好之前应该让你走。