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

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

1 个答案: