1

背景

对于 React Leaflet v2，有一个 NPM 插件react-leaflet-control，它允许您创建任何类型的控件并将其放入 react-leaflet 控件容器中。显然，随着 RL-v3 的引入，随着 API 的变化，这在 v3 中不再适用。我想创建一个自定义控件包装器，以允许我在其中放置任何类型的 React 节点。

当前状态

我目前的代码有效......但没有。我从 Stack Overflow 帖子中的示例中提取：React Leaflet V3 Custom Control，它让我获得了创建自定义控件的 99% 解决方案。但是，我的用例是地图上的工具栏，带有可交互的按钮（用于指定活动工具的颜色）。但是，使用此代码，我具有该功能，但是由于每次渲染都会创建一个新控件，因此工具提示会在丢失其锚元素时闪烁。

期望的行为

我想要一个工具栏，允许用户选择工具以在地图上执行操作（想想老派leaflet-draw。为了提供反馈，我希望按钮在工具处于活动状态时更改颜色，对于 UX，我希望工具提示来描述操作的按钮。

实际行为

存在工具栏，用户可以选择工具，并且有UI反馈，但是，由于在选择工具时删除控件并重新添加了控件，因此该工具提示将丢失其锚元素。

代码沙箱

https://codesandbox.io/s/react-leaflet-custom-control-n1xpv

4

1 回答 1

3

我最终得到了一个类似于@teddybeard 所说的答案。如果我只是div按照建议使用类创建了新的，它将被放置在任何默认控件之上，例如ZoomControlor ScaleControl。相反，我所做的是div从 DOM 中获取实际位置容器，然后在该容器中创建一个 ReactDOM 门户并以这种方式添加我的控件。

它可以工作，不存在由于 React Effect 在每次渲染上删除和重新添加控件而导致的视觉闪烁问题，并且我仍然获得相同的定位。

它位于https://github.com/chris-m92/react-leaflet-custom-control和https://npmjs.com/package/react-leaflet-custom-control的 npm 和 github 上

const POSITION_CLASSES = {
  bottomleft: 'leaflet-bottom leaflet-left',
  bottomright: 'leaflet-bottom leaflet-right',
  topleft: 'leaflet-top leaflet-left',
  topright: 'leaflet-top leaflet-right',
}

const Control = (props: Props): JSX.Element => {
  const [container, setContainer] = React.useState<any>(document.createElement('div'))
  const positionClass = (props.position && POSITION_CLASSES[props.position] || POSITION_CLASSES.topright)

  React.useEffect(() => {
    const targetDiv = document.getElementsByClassName(positionClass)
    setContainer(targetDiv[0])
  }, [])

  const controlContainer = (
    <div className='leaflet-control leaflet-bar'>{props.children}</div>
  )

  L.DomEvent.disableClickPropagation(container)

  return ReactDOM.createPortal(
    controlContainer,
    container
  )
}

export default Control
于 2021-10-22T18:42:36.203 回答