javascript - react 相当于 document.createElement()

Question

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

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

我遇到了同样的问题，想出了两个解决方案:

方案一

1.导入 ReactDOM 库:

从“react-dom”导入 ReactDOM；

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

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

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

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

4.将它添加到您的 map

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

解决方案2

1.导入 ReactDOMServer 库:

从 'react-dom/server' 导入 ReactDOMServer；

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

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

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

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

4.将它添加到您的 map

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

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