使用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