相当于document.createElement（）的等价物

Question

我目前在React应用中使用Mapbox。要创建自定义标记，您必须执行以下操作：

var el = document.createElement('div');
el.className = 'marker';

new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);

它是React，我尝试过：

new mapboxgl.Marker(<div className='marker' />)
.setLngLat(marker.geometry.coordinates)
.addTo(map);

但这不起作用......在上面的背景下，相当于document.createElement()的是什么？当我使用document.createElement()它有效时，但我觉得这不是“正确”的做事方式。我还想将标记抽象为它自己的组件......

Answer 1

React秘诀的一部分是，如果你可以提供帮助，你不会与真正的DOM交互，如果状态或道具发生变化，你就会对虚拟DOM进行更新，让React处理渲染。

如果你确实需要做更多传统的DOM操作，你可以使用refs（https://reactjs.org/docs/refs-and-the-dom.html）以一种孤立的方式处理它。它通常用得很少，但似乎非常适合与Mapbox一起使用

我非常天真的例子是：

// Very simplified
class MapboxWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.markerRef = React.createRef();
  }

  createMarker() {
    new mapboxgl.Marker(this.markerRef)
      .setLngLat(marker.geometry.coordinates)
      .addTo(map);
  }

  componentDidMount() {
    this.createMarker();
  }

  render() {
    return (
      // ...Wrapper elements that you might need
      <div ref={this.markerRef} className="marker" />
    )  
  }
}

由@jumoel提供，我建议更广泛地阅读https://github.com/mapbox/mapbox-react-examples/tree/master/react-tooltip和https://github.com/mapbox/mapbox-react-examples/上的示例，因为它们在本例中更加充实。

Answer 2

您可以尝试使用Mapbox的React包装器：react-mapbox-gl

<Marker coordinates={coordinates} className={className}>

Answer 3

我遇到了同样的问题，并提出了两种解决方案：

解决方案1 ​​

1。 导入ReactDOM库：

import ReactDOM from 'react-dom';

2。 按照Mapbox官方教程的建议创建空div：

const el = document.createElement("div");
el.className = "marker";

3。 将您的标记React组件渲染到新创建的el元素中：

ReactDOM.render(<div className='marker' />, el);

4。 将其添加到您的地图

new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);

解决方案2

1。 导入ReactDOMServer库：

import ReactDOMServer from 'react-dom/server';

2。 按照Mapbox官方教程的建议创建空div：

const el = document.createElement("div");
el.className = "marker";

3。 在标记React组件之外创建静态HTML标记，并将其分配给el.innerHTML

el.innerHTML = ReactDOMServer.renderToStaticMarkup(<div className='marker' />);

4。 将其添加到您的地图

new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);

注意解决方案2有一个缺点。标记元素失去了它的交互性和生命周期方法（基本上是我们可以从React获得的所有好处），因为它变成了纯HTML标记。