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

Question

背景

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

当前状态

我从Stack Overflow post：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门户，并以这种方式添加我的控件。

它的工作，没有视觉闪烁的问题，由于反应效果，删除和重新添加控件，在每次渲染，我仍然得到相同的位置。

它在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