Html 将React组件插入谷歌地图信息窗口

我创建了一个带有多个标记的谷歌地图。现在我想为每个标记添加一个内容。如果我在字符串中编写所有代码，效果会很好，但在该字符串中加载react元素时会出现问题

在这个项目中，我们使用IconUiKit来显示图标。目标是在信息窗口中添加一个pin图标

如果在这里看到与我非常相似的问题=>。不幸的是，ReactDOMServer.renderToString（）返回找不到ReactDOMServer的错误

private setMarkers(map: any): any {
  const {stores} = this.state;
  const infowindow = new google.maps.InfoWindow({
    maxWidth: 400
  });
  for (let i = 0; i < stores.length; i++) {  
    if (google.maps.GeocoderStatus.OK === 'OK' && stores[i].store.address && 
       (Number(stores[i].store.address.latitude) !== undefined) && 
       Number(stores[i].store.address.longitude)) {
      let lat = stores[i].store.address.latitude !== undefined ? stores[i].store.address.latitude : 0;
      let lng = stores[i].store.address.longitude !== undefined ? stores[i].store.address.longitude : 0;
      let pos = lat && lng ? new google.maps.LatLng(lat, lng) : {lat: 0, lng: 0};

      let marker = new google.maps.Marker({
        map: map,
        position: pos
      });

      let projectInfo = [] as string[];
      stores[i].projects.forEach(project => {
        projectInfo.push(
          `<p><b>${project.projectNo}</b></p>` +
          '<p>Attribution: Uluru,' + 
            '<a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
              'https://en.wikipedia.org/w/index.php?title=Uluru' + 
            '</a>' +
          '(last visited June 22, 2009).</p>' +
          '<a class="uk-button uk-button-grey uk-button-register uk-width-1-1 uk-text-uppercase" href="/">' +
            '<span>' +
              'Project Details' +
            '</span>' +
          '</a>'
        );
      });
      let icon = <IconUikit icon="gear" wrap={true}/>;
      console.log(icon.toString());

      let contentString = 
        '<div class="maps-tooltip">' +
          '<div class="uk-grid">' +
            '<div class="uk-width-1-4">' +
              `<img src="${stores[i].store.imageUrl}" class="uk-width-1-1"/>` +
            '</div>' +
            '<div class="uk-width-3-4">' +
              `<p><b class="fr-color-black">${stores[i].store.address.name1}</b></p>` +
               /// HERE IS THE COMPONENT
              ReactDOMServer.renderToString(<IconUikit icon="gear" wrap={true}/>) +
            '</div>' +
            '<div class="uk-width-1-1">' +
              `${projectInfo.toString()}` +
            '</div>' +
          '</div>' +
        '</div>';

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setOptions({
          content: contentString,
        });
        infowindow.open(map, marker);
      });
    }
  }
}

私有设置标记（映射：任意）：任意{
const{stores}=this.state；
const infowindow=new google.maps.infowindow({
最大宽度：400
});
对于（设i=0；i{
projectInfo.push(
` ${project.projectNo}
`+
“attribute:Uluru，”
'' +
（上次访问日期为2009年6月22日）。
'+
''
);
});
让图标=；
console.log（icon.toString（））；
让contentString=
'' +
'' +
'' +
`` +
'' +
'' +
` ${stores[i].store.address.name1}
`+
///这是组件
ReactDOMServer.renderToString（）的+
'' +
'' +
`${projectInfo.toString（）}`+
'' +
'' +
'';
google.maps.event.addListener（标记'click'，函数（）{
infowindow.setOptions({
content:contentString，
});
信息窗口。打开（地图、标记）；
});
}
}
}

已解决

ReactDomServer是@types/react-dom的一部分。而不是从“react dom/server”调用ReactDomServer.renderToString（）导入{renderToString}；只需使用renderToString（）.toString（）