如何使用 JSX 作为来自 Google Maps API 的 InfoWindow 的内容？

Question

我在一个需要使用 Google 地图的 ReactJS 项目中工作。我研究了 NPM 上可用的插件，但没有一个能满足我的所有需求，所以我使用纯 JavaScript API for Google-Maps。

按照来自 Google-Maps 的 Info Windows documentation 创建信息窗口，我正在尝试这样做：

data.pieces.map(piece => {
           let pieceInfo = 
    `<div class="infowindow">
       <h1>${piece.Name}</h1>
       <p>${piece.Description}</p>
       <p>${piece.RandomText}</p>
    </div>`
    
    let infowindow = new window.google.maps.InfoWindow({
        content: pieceInfo
    })
})

但是，这种方法并不能处理我拥有的所有用例。由于我正在使用 ReactJS，我想知道是否可以使用 JSX - 及其所有资源 - 作为 InfoWindow 内容。 我的另一个尝试是：

attempt = (content) => (
   <div className="infowindow">
      <h1>{content.Name}</h1>
      <p>{content.Description}</p>
   </div>
)

...

data.pieces.map(piece => {
    let test = this.attempt(piece)
    let infowindow = new window.google.maps.InfoWindow({
          content: test,
})
})

不幸的是，这也不起作用，并在控制台中抛出此错误：

InvalidValueError: setContent: not a string;和 [object 对象]

所以，我不知道如何继续。可以使用 JSX 作为 Info 窗口的内容吗？

提前致谢。

Answer 1

因为它希望你传入一个字符串，所以你必须将 JSX 渲染成一个字符串。我知道这样做的唯一方法是使用 react-dom/server （尽管包名称，此功能也可以在客户端工作）：

import ReactDOMServer from 'react-dom/server';

// ...

data.pieces.map(piece => {
  let content = ReactDOMServer.renderToString(
    <div className="infowindow">
      <h1>{piece.Name}</h1>
      <p>{piece.Description}</p>
    </div>
  );
  let infowindow = new window.google.maps.InfoWindow({ content });
});

在此处查看更多信息：https://reactjs.org/docs/react-dom-server.html#rendertostring