0

所以 我<Marker />正在渲染一堆由google-maps-reactgoogle-maps-react<Link />react-router-dom

这就是我把它放在一起的方式：

render() {
    return (
      <div>
        <Map
          google={this.props.google}
          zoom={14}
          styles={this.props.mapStyles}
          disableDefaultUI={true}
          onClick={this.saveCoords}
        >
          {this.state.data.map(m => {
            return (
              <Link to={`/c/contribution/${m.id}`}>
                <Marker position={{ lat: m.x, lng: m.y }} title={m.title} />
              </Link>
            )
          })}
        </Map>
      </div>
    )
  }

我尝试window.location改用，但这会重新加载页面，我不希望这样。

我在上面的代码中遇到了这个错误，这对我来说真的没有意义：

Warning: React does not recognize the `mapCenter` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `mapcenter` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

有了这个，我尝试实现一个可点击<Marker/>的，它将呈现另一个元素。可以通过转到Route代码示例中的当前来访问此特定元素。

使用的路线：

<Route path='/c/contribution/:id' component={Contribution} />
4

2 回答 2

0

google-maps-react不幸的是，由于地图的子项是如何呈现的，您不能用这样的方式包装标记。我并没有深入研究，所以我不清楚为什么它会以它的方式工作。

我google-maps-react认为要走的路是附加点击处理程序，但这会使工作react-router变得更加复杂。

对于可能更简单的路径，您可以尝试该google-map-react软件包。它的工作方式略有不同，但可以轻松地在地图上渲染几乎任何东西。

于 2019-12-30T09:24:35.040 回答
0

您可以使用onClick标记上的事件进行重定向。为要重定向到的路径设置 state 属性，如果该属性不是空 string ，则返回一个<Redirect/>元素，而不是重新处理普通组件。

 constructor(props){
    super(props)
    this.state = {
      ...
      redirectTo:"
    };
}

    this.setRedirect = (path)=>{
      this.setState({
      redirectTo:path
     }
   }

render(){
if(this.state.redirectTo !== "")
    return <Redirect to={this.state.redirectTo}/>
else
 return (
      <div>
        <Map
          google={this.props.google}
          zoom={14}
          styles={this.props.mapStyles}
          disableDefaultUI={true}
          onClick={this.saveCoords}
        >
          {this.state.data.map(m => {
            return (
                <Marker onClick={()=>this.setRedirect(`/c/contribution/${m.id}`)} position={{ lat: m.x, lng: m.y }} title={m.title} />
            )
          })}
        </Map>
      </div>
    )

}
于 2019-12-30T09:37:54.017 回答