0

我的应用程序可以很好地加载我的所有标记，但是当我尝试单击标记时会崩溃。我收到以下错误：“React.Children.only 预计会收到一个 React 元素子项。”

在主地图组件中，我构建地图并从 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;
4

1 回答 1

0

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

而不是这样：

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

我必须有这个：

<InfoWindow onCloseClick={this.onToggleOpen}><span>{index}</span></InfoWindow>
于 2017-11-13T17:43:53.437 回答