Dom Here Maps的标记不显示react渲染的内容

Question

这段代码工作正常：

const div = document.createElement('div');
div.innerHTML = 'abc';
this.marker = new H.map.DomMarker(PositionToLatLng(position), {
  icon: new H.map.DomIcon(div),
});

虽然此代码不显示任何内容：

const div = document.createElement('div');
ReactDOM.render('abc', div);
this.marker = new H.map.DomMarker(PositionToLatLng(position), {
  icon: new H.map.DomIcon(div),
});

DomMarker(DomIcon) 应该显示任何 HTMLElement，无论它是由 DOM api 创建的还是由 react 呈现的。

Answer 1

我一直在使用 renderToStaticMarkup 并将子组件嵌套在其中。

import { renderToStaticMarkup } from 'react-dom/server';

// lifecycle method
const html = renderToStaticMarkup(children);
const icon = new window.H.map.DomIcon(html);
this.marker = new window.H.map.DomMarker({ lat, lng }, { icon });

注意：这是服务器端呈现的。

https://reactjs.org/docs/react-dom-server.html#rendertostring

如果您对 DomIcon 特别感兴趣，他们的文档有一个非常好的代码示例：

https://developer.here.com/documentation/maps/topics_api/h-map-domicon.html

Dom Here Maps的标记不显示react渲染的内容

Dom Marker of Here Maps does not display the content which rendered by react

here-api

reactjs