在 leaflet-contextmenu 中更新回调

Question

问题

我在 react-leaflet v3.2.1 中使用 leaflet-contextmenu v1.4.0。问题是我下面的代码是 showColor 在 color 更改时从不更新。

例如，如果 color 在应用程序初始化时是 'blue'，showColor 将知道 color 是 'blue'。如果 color 更改为 'red'，则 showColor 永远不会更新；它似乎是不可变的。

问题

如何更新 leaflet-contextmenu 菜单项中的回调？

const Component = ({ color: string }) => {
  var map = L.map('map', {
    contextmenu: true,
    contextmenuWidth: 140,
    contextmenuItems: [
      {
        text: 'Show color',
        callback: showColor,
      },
    ],
  });
  
  function showColor() {
    alert(color);
  }
};

Answer 1

我认为你只能实例化地图一次，而不是在每次重新渲染时。相反，只需在每次重新渲染时添加上下文菜单项。

// Only invoke L.map() once
var map = L.map('map', {
    contextmenu: true,
    contextmenuWidth: 140,
});

const Component = ({ color: string }) => {

    // update context menu items anytime color changes
    useEffect(() => {
        map.contextmenu.removeAllItems();
        map.contextmenu.addItem({
          text: 'Show color',
          callback: () => { alert(color) },
        });
    }, [color]);
};

在 leaflet-contextmenu 中更新回调

Updating callbacks in leaflet-contextmenu

javascript

typescript

leaflet

react-leaflet

问题

问题