我正在从事一个需要使用 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 作为信息窗口的内容吗?
提前致谢。
最佳答案
由于它希望您传入一个字符串,因此您必须将 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
关于javascript - 如何使用 JSX 作为 Google Maps API 中 InfoWindow 的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57064485/