反应打字稿传单绘制：无法切换按钮答案

【问题标题】：React typescript leaflet draw: unable to toggle button反应打字稿传单绘制：无法切换按钮
【发布时间】：2022-08-10 21:32:29
【问题描述】：

在 React + Typescript 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;

该按钮最初是显示的，并且在单击“切换”按钮后，它正确地消失了。

不幸的是，再次按下“切换”按钮，它就不再出现了。

实现正确行为的正确方法是什么？

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

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

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

标签： typescript react-leaflet-draw

【解决方案1】：

我有一个类似的问题。

作为一种解决方法，我使用添加的键设置绘制选项，该键总是不同的，以绕过 prevProps VS 道具检查。见下文：

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

这真的很hacky，但应该让你继续前进，直到它被修复。

【讨论】：