使用React在Mapbox GL中自定义标记

Question

Mapbox GL提供了一种添加自定义标记的方法，但是它需要HTMLElement作为参数，它强制使用ReactDom首先渲染标记，然后追加它：

const placeholder = document.createElement('div');

const marker = ReactDOM.render(
  <div className='mapboxgl-marker'>
    <marker/>
  </div>, placeholder);

const markerRef = new mapboxgl.Marker(marker).setLngLat(position).addTo(map);

我认为这是次优解决方案，因为它发生在render()函数之外。

有更好的方法吗？

Answer 1

扩展React组件，以便通过利用shouldComponentUpdate函数控制渲染的次数。

如果从此函数返回true，则marker将重新渲染。看起来你只想渲染一次所以你可以硬编码你的shouldComponentUpdate总是返回false。但是，如果你只想让它运行一次那么关注到底是什么？也许你只想在某些条件下有条件地重新渲染，这样你就可以处理shouldComponentUpdate函数中的那些。

更多信息：`https://reactjs.org/docs/react-component.html#shouldcomponentupdate