react-google-maps 多个标记在打开时中断

Question

我的应用程序加载我的所有标记都很好，但是当我尝试单击标记时崩溃了。我收到以下错误： "React.Children.only expected to receive a single React element child."

在主地图组件中，我构建了地图并引入了来自 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;

Answer 1

好吧，事实证明这里有一个非常简单的修复方法。 InfoWindow 中的内容必须包装在符合 JSX 的元素中。

而不是这个：

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

我必须拥有这个：

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

react-google-maps 多个标记在打开时中断

react-google-maps multiple markers breaks on open

react-google-maps