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

发布时间：2020-12-15 20:19:00 所属栏目：百科来源：网络整理

导读：Mapbox GL提供了一种添加自定义标记的方法,但它以 HTMLElement作为参数,强制使用ReactDom首先渲染标记,然后追加它： const placeholder = document.createElement('div');const marker = ReactDOM.render( div className='mapboxgl-marker' marker/ /div,pla

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()函数之外.

有更好的方法吗？

解决方法

扩展React组件,以便您可以通过利用shouldComponentUpdate函数来控制它呈现的次数.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!