React-Leaflet-v3 可重用的自定义控件

Question

背景

对于 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

Answer 1

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

它可以工作，没有视觉闪烁的问题，因为 React Effect 在每次渲染上删除并重新添加控件，我仍然得到相同的定位。

它在 npm 和 github 上运行，地址为 https://github.com/chris-m92/react-leaflet-custom-control 和 https://npmjs.com/package/react-leaflet-custom-control

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