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

Question

我在一个需要使用 Google 地图的 ReactJS 项目中工作。我查看了 NPM 上可用的插件，但其中 none 满足了我的所有需求，因此我使用纯 JavaScript API 作为 Google-Maps。

根据 Google-Maps 中的 Info Windows documentation 创建信息-windows，我正在尝试这样做：

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; and [object Object]

所以，我不知道如何进行。可以使用 JSX 作为 Info 的内容 window?

提前致谢。

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

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

How to use JSX as content for InfoWindow from Google Maps API?

javascript

jsx

infowindow

google-maps-api-3

reactjs