因此，我的应用程序需要在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)
})
}
传递给内容。我的组件设置为
<Link>我对React很新，所以我觉得有一种方法可能将内容渲染为一个单独的组件？或以某种方式呈现<Link>标记并将其字符串化。有线索吗？
修改
所以我通过传递一个返回renderMarkerContent(id) {
return ReactDOMServer.renderToString(<Link to={`wells/${id}`}>Well Page</Link>)
}
<a>不确定这是否是最佳解决方案，但它没有完全渲染，并且在没有href的情况下为我提供了{{1}}元素。