javascript - 如何使用 JSX 作为 Google Maps API 中 InfoWindow 的内容？

Question

我正在从事一个需要使用 Google map 的 ReactJS 项目。我研究了 NPM 上提供的插件，但没有一个能够满足我的所有需求，因此我使用了用于 Google map 的纯 JavaScript API。

遵循Info Windows documentation从 Google map 创建信息窗口，我正在尝试这样做:

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 作为信息窗口的内容吗？

提前致谢。

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