未捕获的错误：onlyChild必须传递给一个孩子只有一个孩子

Question

我已经尝试了4个反应谷歌地图包，但都失败了，所以我想直接使用谷歌地图。我得到了Uncaught Error: onlyChild must be passed a children with exactly one child.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import GMap from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

var initialCenter = { lng: -90.1056957, lat: 29.9717272 }

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <GMap initialCenter={initialCenter} />,
  </Provider>
  , document.querySelector('.container'));

组件/ app.js

import React from 'react';


class GMap extends React.Component {
  constructor(props){
      super(props);
      this.state = { zoom: 10 };
  }

    render() {
        return (
            <div className="GMap">
              <div className='GMap-canvas' ref="mapCanvas"></div>
          </div>
        )
  }

  componentDidMount() {
    // create the map, marker and infoWindow after the component has
    // been rendered because we need to manipulate the DOM for Google =(
    this.setState({ map: this.createMap() })
  }

  createMap() {
    let mapOptions = {
      zoom: this.state.zoom,
      center: this.mapCenter()
    }
    return new google.maps.Map(this.refs.mapCanvas, mapOptions);
  }

  mapCenter() {
    return new google.maps.LatLng(30.3, -97.75);
  }
}