Reactjs React google maps infowindow`React.Children.只应接收单个React元素子元素`

我试图在单击时打开特定标记上的信息窗口，但当我单击其中一个标记时，似乎所有标记都打开了，并显示此错误：

React.Children.只希望接收单个React元素子元素。

这就是我的代码现在的样子：

import React, { Component } from 'react';
import {  GoogleMap, Marker, withGoogleMap, withScriptjs, InfoWindow } from 'react-google-maps'

class Map extends Component {
  state = {
    isOpen: false
  }

  handleMarkerClick = () => {
    this.setState({ isOpen: true})
  }

  render() {
    return(
    <div>
      <GoogleMap
        defaultZoom={13}
        defaultCenter={{ lat: -22.9034778, lng: -43.1264636 }}
      >{this.props.markers.map((marker, index) =>(
        <Marker
          key={index}
          position={marker.location}
          onClick={this.handleMarkerClick}
         >{this.state.isOpen && <InfoWindow onCloseClick={this.handleMarkerClick}/>}
       </Marker>
      ))}
      </GoogleMap>
    </div>
    )
  }
}

export default withScriptjs(withGoogleMap(Map))

import React，{Component}来自'React'；
从“react google maps”导入{GoogleMap，Marker，withGoogleMap，withScriptjs，InfoWindow}
类映射扩展组件{
状态={
伊索彭：错
}
handleMarkerClick=（）=>{
this.setState（{isOpen:true}）
}
render（）{
返回(
{this.props.markers.map（（marker，index）=>(
{this.state.isOpen&&}
))}
)
}
}
使用ScriptJS导出默认值（使用GoogleMap（地图））

开始编辑

我做了一些更改以尝试解决该评论，但是它还不起作用，您能否给我一些提示，说明我做错了什么，因为我对顶部组件做了一些更改，我也会将其粘贴到此处：

import React, { Component } from 'react';
import Map from './Map.js'
import List from './List.js'
import escapeRegExp from 'escape-string-regexp'
import sortBy from 'sort-by'

class App extends Component {
  state ={
    locations:[
      {
        name: "Paróquia Nossa Senhora das Dores do Ingá",
        location: {
          lat: -22.9038875,
          lng: -43.1252873
        },
        isOpen:false,
      },
      {
        name: "Museu de Arte Contemporanea de Niteroi",
        location: {
          lat: -22.9078182,
          lng: -43.1262919
        },
        isOpen:false,
      },
      {
        name: "UFF - Faculdade de Direito",
        location: {
          lat: -22.9038469,
          lng: -43.126024
        },
        isOpen:false,
      },
      {
        name: "Ponte Rio-Niterói",
        location: {
          lat: -22.8701,
          lng: -43.167
        },
        isOpen:false,
      },
      {
        name: "Fundação Oscar Niemeyer",
        location: {
          lat: -22.888533927137285,
          lng: -43.12815992250511
        },
        isOpen:false,
      },
      {
        name: "Campo de São Bento",
        location: {
          lat: -22.905279,
          lng: -43.107759
        },
        isOpen:false,
      }
    ],
    query:''
  }

  onToggleOpen = (location) => {
    this.setState({ isOpen: !this.isOpen })
  }

  updateQuery = (query) => {
    this.setState({ query: query.trim() })
    console.log(query)
  }

  componentDidMount() {}
  render() {
    const { query, locations } = this.state

    let filteredMarkers
    if(query) {
      const match = new RegExp(escapeRegExp(query), 'i')
      filteredMarkers = locations.filter((location) => match.test(location.name))
    }else {
      filteredMarkers = locations
    }

    filteredMarkers.sort(sortBy('name'))

    return (
      <div className="App">
        <div style={{height:`5vh`}}>
          <input
            type='text'
            placeholder='Search locations'
            value={query}
            onChange={(event) => this.updateQuery(event.target.value)}
          />
        </div>
        <List
          markers={filteredMarkers}
        />
        <Map
          onToggle={this.onToggleOpen}
          googleMapURL="https://maps.googleapis.com/maps/api/js?&key=AIzaSyAiqO5W1p5FAFf8RZD11PGigUXSlmVHguQ&v=3"
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `80vh` }} />}
          mapElement={<div style={{ height: `100%` }} />}
          className="Map"
          markers={filteredMarkers}
        />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“./Map.js”导入地图
从“./List.js”导入列表
从“转义字符串regexp”导入转义表达式exp
从“排序依据”导入排序依据
类应用程序扩展组件{
陈述={
地点：[
{
名称：“Paróquia Nossa Senhora das Dores do Ingá”，
地点：{
纬度：-22.9038875，
液化天然气：-43.1252873
},
伊索彭：错，
},
{
名称：“尼特罗伊当代艺术博物馆”，
地点：{
lat:-22.9078182，
液化天然气：-43.1262919
},
伊索彭：错，
},
{
名称：“UFF-迪雷托广场”，
地点：{
纬度：-22.9038469，
液化天然气：-43.126024
},
伊索彭：错，
},
{
名称：“里约热内卢桥”，
地点：{
lat:-22.8701，
液化天然气：-43.167
},
伊索彭：错，
},
{
名称：“奥斯卡·尼迈耶基金会”，
地点：{
lat:-22.888533927137285，
液化天然气：-43.12815992250511
},
伊索彭：错，
},
{
名称：“圣本托营地”，
地点：{
lat:-22.905279，
液化天然气：-43.107759
},
伊索彭：错，
}
],
查询：“”
}
onToggleOpen=（位置）=>{
this.setState（{isOpen:！this.isOpen}）
}
updateQuery=（查询）=>{
this.setState（{query:query.trim（）}）
console.log（查询）
}
componentDidMount（）{}
render（）{
const{query，locations}=this.state
让过滤器标记器
如果（查询）{
const match=new RegExp（escapeRegExp（查询），'i'）
filteredMarkers=locations.filter（（location）=>match.test（location.name））
}否则{
filteredMarkers=位置
}
filteredMarkers.sort（按（'name'）排序）
返回(
this.updateQuery（event.target.value）}
/>
);
}
}
导出默认应用程序；

Map.js

import React, { Component } from 'react';
import {  GoogleMap, Marker, withGoogleMap, withScriptjs, InfoWindow } from 'react-google-maps'

class Map extends Component {
  render() {
    return(
    <div>
      <GoogleMap
        defaultZoom={13}
        defaultCenter={{ lat: -22.9034778, lng: -43.1264636 }}
      >{this.props.markers.map((marker, index) =>(
        <Marker
          key={index}
          position={marker.location}
          onClick={() => this.props.onToggle(marker)}
         >{marker.isOpen && <InfoWindow onCloseClick={this.ontoggleOpen}>Hello</InfoWindow>}
       </Marker>
      ))}
      </GoogleMap>
    </div>
    )
  }
}

export default withScriptjs(withGoogleMap(Map))

import React，{Component}来自'React'；
从“react google maps”导入{GoogleMap，Marker，withGoogleMap，withScriptjs，InfoWindow}
类映射扩展组件{
render（）{
返回(
{this.props.markers.map（（marker，index）=>(
this.props.onToggle（marker）}
>{marker.isOpen&&Hello}
))}
)
}
}
使用ScriptJS导出默认值（使用GoogleMap（地图））

我在

React.Children.上遇到的问题。我只希望接收一个React元素子元素。

是因为我没有在信息窗口中设置div，所以只需添加它，这个特殊问题就解决了

这是它过去的样子：

下面是它的外观：

this.props.onToggle（marker）}>Hello

---

或者类似的东西。

在您的

地图

状态中，您有一个属性，您可以检查该属性，并为您可以拥有的所有信息窗口显示一个

信息窗口

。因此，如果单击单个标记，将显示所有信息窗口。您应该跟踪单击了哪个标记，然后使用相同的

索引为标记输出信息窗口
嘿，AntK我尝试根据您的评论进行一些更改，但是我无法使其工作，您能给我一些帮助吗，我编辑了这篇文章来展示这些变化。你能分享一个关于道具的例子吗？markers的样子，这将帮助我制作一个工作示例道具。markers是位于该州的位置数组，这是位置之一：{name:“Paróquia Nossa Senhora das Dores do Ingá”，位置：{lat:-22.9038875，lng:-43.1252873}，isOpen:false，}我又乱了一点，注意到点击处理程序正在工作，我只是不能用onToggleOpen函数设置状态，所以我相信这就是问题所在。我为这个修复程序有多简单而自责。