Question

因此，我渲染了一堆<Marker />给予的google-maps-react 问题是，当我添加来自google-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来访问此特定的elemend。

使用的路线：

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

Answer 1

不幸的是，由于地图子级的呈现方式，您不能像这样用google-maps-react包装标记。我并没有对此进行深入研究，所以我不清楚为什么它确切地起作用。

我认为使用google-maps-react的方法是附加点击处理程序，但这会使使用react-router的工作更加复杂。

对于一条更简单的路径，您可以尝试使用google-map-react软件包。它的工作方式略有不同，但是可以轻松在地图上渲染几乎所有内容。

Answer 2

您可以在标记上使用$query = "select * from tbladmin"; $rs = mysql_query($query); $html =""; $i=1; while($row = mysql_fetch_array($rs)) { $html .='<tr> <td>'.$row['adm_id'].'</td> <td>'.$row['adm_name'].'</td> <td>'.$row['adm_email'].'</td> <td>'.$row['adm_password'].'</td> <td>'.$row['adm_gender'].'</td> <td> <img src="Uimages/'.$row['adm_photo'].'" height="90%" width="90%" alt="No Photo" </td></td> </tr>'; $i=1; } <table class="listing" cellpadding="0" cellspacing="0"> <tr> <th bgcolor="#999999" scope="col">ID</th> <th bgcolor="#999999" scope="col">Name</th> <th bgcolor="#999999" scope="col">E-mail</th> <th bgcolor="#999999" scope="col">Password</th> <th bgcolor="#999999" scope="col">Gender</th> <th bgcolor="#999999" scope="col">Photo </th> </tr> <?php echo $html ?> </table>事件进行重定向。为您要重定向的路径设置一个state属性，如果该属性不是一个空字符串，则不返回常规组件，而是返回一个onClick元素。

<Redirect/>

结合google-maps-react和react-router

2 个答案: