reactjs - 使用 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，您的标记将重新渲染。看来您只想渲染一次，因此您可以对 shouldComponentUpdate 进行硬编码以始终返回 false。但是，如果您只想让它运行一次，那么到底有什么问题呢？也许您只想在某些条件下有条件地重新渲染，以便可以在 shouldComponentUpdate 函数中处理这些情况。

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