react-google-maps打開多個標記中斷

我的應用程序加載了所有標記就好了，但當我嘗試單擊標記時會崩潰。我收到以下錯誤：「React.Children.only預計會收到一個React元素子元素。」react-google-maps打開多個標記中斷

在主地圖組件中，我構建地圖並引入Firebase中的所有標記。我想組件化標記並將它們構建在一個單獨的文件中，以便讓事情在我的腦海中保持一點直觀。

這裏是我的地圖組件

const MyMapComponent = compose(
withProps({ 
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=xxxxx&v=3.exp&libraries=geometry,drawing,places", 
    loadingElement: <div style={{ height: `100%` }} />, 
    containerElement: <div style={{ height: `500px` }} />, 
    mapElement: <div style={{ height: `100%` }} />, 
}), 
withScriptjs, 
withGoogleMap 
)((props) => 
<GoogleMap 
    defaultZoom={15} 
    defaultCenter={{ lat: 34.6781445, lng: -82.8455519 }} 
> 
    {props.markers.map(marker => (
     <LotMarker key={marker.key} index={marker.key} lat={marker.latitude} lng={marker.longitude} /> 
    ))} 
</GoogleMap> 
); 

class TheMap extends React.PureComponent { 

    constructor(props) { 
     super(props); 
     this.state = { 
      test:'test', 
      lots: [], 
      isOpen: false 
     }; 
    } 

    componentWillMount() { 
     base.bindToState('lots', { 
      context: this, 
      state: 'lots', 
      asArray: true, 
     }); 
    } 

    handleMarkerClick = (key) => { 
     console.log(key); 
    } 

    render() { 
     return (
      <MyMapComponent 
      isMarkerShown={this.state.isMarkerShown} 
      onMarkerClick={this.handleMarkerClick} 
      markers={this.state.lots} 
      /> 
     ) 
    } 
} 
export default TheMap;

在這裏，我把標誌在一起。我將InfoWindow組件放置在標記內，然後讓它顯示何時點擊標記。但是，當我點擊標記時，它只會崩潰整個應用程序和白色屏幕。

這是我LotMarker組件：

class LotMarker extends React.Component { 

// Constructor. 
constructor(props) { 
    // Super Props. 
    super(props); 
    // State. 
    this.state = { 
     isOpen: false 
    } 
} 

onToggleOpen =() => { 
    console.log(this); 
    this.setState({isOpen: !this.state.isOpen}); 
} 


// Render. 
render() { 

// console.log(this); 

    // Extract Props. 
    const { 
     props: { 
      index, 
      lat, 
      lng, 
      open 
     } 
    } = this 

return (
    <Marker key={index} position={{ lat: lat, lng: lng }} onClick={this.onToggleOpen}> 
     {this.state.isOpen && <InfoWindow onCloseClick={this.onToggleOpen}>{index}</InfoWindow>} 
    </Marker> 
    ) 
} 
} 

export default LotMarker;

來源

2017-11-10 doublenit

好吧，原來有一個非常簡單的解決在這裏。 InfoWindow內部的內容必須包裝在符合JSX的元素中。

而不是這樣的：

<InfoWindow onCloseClick={this.onToggleOpen}>{index}</InfoWindow>

我必須有這樣的：

<InfoWindow onCloseClick={this.onToggleOpen}><span>{index}</span></InfoWindow>

來源

2017-11-13 17:43:53 doublenit

react-google-maps打開多個標記中斷

回答

相關問題