呈现react-router< Link>在InfoWindow里面 [英] Render react-router <Link> inside google InfoWindow

问题描述

因此，我的应用程序需要链接才能包含在Google的InfoWindow中，但是，infoWindow的内容只接受一个字符串。对我而言，我无法弄清楚如何将< Link> 传递给内容。我的组件设置为像

 从'react'导入React，{Component}; 
从'react-redux'导入{connect}; 
从'../actions/index'中导入{fetchWells}; 
从'react-router'导入{link} 
 
 class Map {Component元素{
构造函数（道具）{
 super（道具）; 
} 
 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）
 $）
} 
  

我对React很新颖，所以我觉得就像有一种方法可能将内容渲染为单独的组件？或者以某种方式呈现< Link> 标记并对其进行字符串化。任何线索？

编辑

所以我得到了渲染链接通过传递函数返回< Link>

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

不确定这是否是最好的解决方案，但它不能完全呈现并给我一个< a> ; 没有href的元素。

解决方案

您是否尝试过 react-google-maps ？您可以轻松自定义InfoWindow的内容并插入链接。

编辑：
实际上 google-map-react 好得多，我最近转向它。

So my application requires a link to be included in Google's InfoWindow, however, the infoWindow's content only accepts a string. For the life of me, I can't figure out how to pass a <Link> into content. My component is set up like

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)
    })
  }

I'm pretty new to React, so I feel like there is a way to maybe Render the content as a separate component maybe? Or somehow render the <Link> tag and stringify it. Any clues?

EDIT

So I've gotten the links to render using by passing a function that returns the <Link>

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

Not sure if this is the best solution, but it doesn't fully render and gives me an <a> element without the href.

解决方案

Have you tried react-google-maps? You can easily customise content of InfoWindow and insert Link.

Edit: Actually google-map-react is much better, I switched to it recently.

这篇关于呈现react-router< Link>在InfoWindow里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！