Question

我的应用加载了所有我的标记就好了，但是当我尝试单击标记时崩溃了。我收到以下错误：＆＃34; React.Children.only期望收到一个React元素子。＆＃34;

在主地图组件中，我构建地图并从Firebase引入所有标记。我想将这些标记组件化并将它们构建在一个单独的文件中，只是为了让我的脑子里的东西更加直线。

这是我的地图组件

我把标记放在一起。我已将InfoWindow组件放在标记内，然后让它显示何时单击标记。但是，当我点击一个标记时，它只会崩溃整个应用程序和白色屏幕。

这是我的LotMarker组件：

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;

Answer 1

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

而不是：

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

我必须有这个：

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

react-google-maps打开多个标记

1 个答案: