使用react-leaflet将层绑定到功能组件中的onEachFeature

Question

在渲染react-leaflet映射时，我在将onEachFeature的上下文绑定到处理程序时遇到了一些麻烦。

这是相关的处理程序

function handleInteractive(
  feature: any,
  layer: L.Layer,
  params: AdditionalBindingParams,
) {
  const { space, store } = params;
  layer.bindTooltip(space.name, {
    permanent: true,
    direction: 'center',
  });

  const onClick = () => {
    const activeSpaceId = getSpaceLayerId(feature);
    const centerFn = this.getBounds; //also tried layer.getBounds
    const coordinates = centerFn ? centerFn().getCenter() : undefined;
    if (store) {
      store.dispatch(setActiveMapLocation({ activeSpaceId, coordinates }));
    }
  };
  layer.on('click', onClick, layer);
}

当我使用断点时，最后一行layer.on('click', onClick, layer);正确地绑定了this，但是在代码中调用时它仍然失败。

如您所见，本地范围内的this绑定到目标层NewClass上。还应注意，其他层处理程序已正确绑定（例如bindTooltip）。

也就是说，函数中的传入参数layer是未定义的。此外，在leaflet内部调用时，定义了getBounds，但是this是undefined

以下是组件的呈现方式（功能组件，而不是类组件）

 <GeoJSON
    key={document_id}
    onEachFeature={onEachFeature} /// also tried with `.bind(this)`
    data={...props} />

那里也有类似的SO问题（例如another binding problem），但我没有找到解决方法。

我的直觉是，底层库中某处有一个箭头函数正在吞噬上下文，但我想我会看看是否有人可以提供帮助。谢谢。

Answer 1

您可以采取一些不同的方法来避免使用this，如果您正在使用React Hooks，这也可能会有所帮助。

选项1

通过.on event通过传单传递其他参数：

function handleEachFeature(feature, layer) {
    layer.on("click", (e) => {
      handleClick(e, layer);
    });
}

function handleClick(event, layer) {
  const bounds = layer.getBounds();
  console.log(bounds);
}

选项2

通过传单L.bind函数传递额外的参数：

function handleEachFeature(feature, layer) {
    layer.on("click", L.bind(handleClick, null, layer));
}

function handleClick(layer) {
  const bounds = layer.getBounds();
  console.log(bounds);
}

选项3

通过Event.target property获取layer：

function handleEachFeature(feature, layer) {
    layer.on("click", handleClick);
}

function handleClick(event) {
    const bounds = event.target.getBounds();
    console.log(bounds);
}

注意：需要导入传单包：import * as L from "leaflet";