Javascript 渲染反应路由器<；链接>；谷歌信息窗口内

因此，我的应用程序需要在Google的InfoWindow中包含一个链接，然而，InfoWindow的内容只接受一个字符串。就我的一生而言，我不知道如何将

传递到内容中。我的组件设置如下

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchWells } from '../actions/index';
import { Link } from 'react-router'

class Map extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const markers = [];
    this.props.fetchWells();
    const map = new google.maps.Map(this.refs.map, {
      zoom: 7,
      center: {
        lat: this.props.route.lat,
        lng: this.props.route.lng
      }
    });
    this.setState( { map })
  };

  renderMarkerContent(id) {
    return <Link to={`wells/${id}`}>Link</Link>;
  }

  componentWillReceiveProps(nextProps) {
    const markers = [];
    console.log(nextProps.wells)
    nextProps.wells.forEach((well) => {
      if (well.location === null) return;
      console.log(well)
      const marker = new google.maps.Marker({
        position: { lat: well.location.coordinates[0], lng: well.location.coordinates[1]},
        map: this.state.map
      });
      const infoWindow = new google.maps.InfoWindow({
        content: this.renderMarkerContent(),
      });
      marker.addListener('click', () => {
        infoWindow.open(map, marker)
      });
      markers.push(marker)
    })
  }

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../actions/index”导入{fetchWells}；
从“反应路由器”导入{Link}
类映射扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
常量标记=[]；
this.props.fetchWells（）；
const map=new google.maps.map（this.refs.map{
缩放：7，
中心：{
lat:this.props.route.lat，
液化天然气：this.props.route.lng
}
});
this.setState（{map}）
};
renderMarkerContent（id）{
返回链接；
}
组件将接收道具（下一步）{
常量标记=[]；
console.log（nextrops.wells）
nextrops.wells.forEach（（well）=>{
if（well.location==null）返回；
控制台日志（井）
const marker=new google.maps.marker({
位置：{lat:well.location.座标[0]，lng:well.location.座标[1]}，
地图：this.state.map
});
const infoWindow=new google.maps.infoWindow({
内容：this.renderMarkerContent（），
});
marker.addListener（'单击'，（）=>{
信息窗口。打开（地图、标记）
});
标记器。推（标记器）
})
}

我是个新手，所以我觉得有一种方法可以将内容作为一个单独的组件呈现，或者以某种方式呈现

标记并将其字符串化。有什么线索吗

编辑

因此，我通过传递一个返回

renderMarkerContent（id）{
返回ReactDOMServer.renderToString（井页）
}

---

不确定这是否是最好的解决方案，但它没有完全呈现，并且在没有href的情况下为我提供了一个

元素。

您尝试过吗？您可以轻松自定义信息窗口的内容并插入链接。编辑：实际上更好，我最近换了它。我确实尝试过。这是一个很棒的组件，确实解决了这个问题，但是最后我拿了一张地图传单。谢谢

renderMarkerContent(id) {
    return ReactDOMServer.renderToString(<Link to={`wells/${id}`}>Well Page</Link>)
}