React-google-maps infowindow`React.Children. 단 하나의 React 요소 자식 만받을 것으로 예상됩니다. '

Question

클릭 할 때 특정 마커에 infowindow를 열려고하는데, 하나를 클릭하면 모든 것이 나타납니다 대신에 개방하고, 나에게이 오류 보이고있다 : React.Children.only expected to receive a single React element child.

이 내 코드는 지금 모습입니다 : 편집의

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

난이 특정 문제는 해결되었다 추가하여 매우 간단 정보창 내부 DIV을 설정하지 않았기 때문에

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

Answer 1

제가 React.Children.only expected to receive a single React element child.로 구비하는 문제가 발생되고 있었다. 여기

<InfoWindow onCloseClick={this.handleMarkerClick}/>

이 어떻게 보일지입니다 : <InfoWindow onCloseClick={()=>this.props.onToggle(marker)}><div>Hello</div></InfoWindow>

또는이 라인을 따라 뭔가 여기

은 같이하는 데 사용되는 것입니다.