Question

我是reactjs的新手并且无法调试此错误：元素类型无效：预期字符串或类/函数但得到：undefined。您可能忘记从其定义的文件中导出组件。请检查Map的呈现方法。

以下是代码：

Map.js

import React, { Component } from 'react'
import { GoogleMapLoader, GoogleMap, Marker } from 'react-google-maps'


class Map extends Component {
    render(){
        const mapContainer = <div style={{height: '100%', width: '100%'}}></div>

        return (
            <GoogleMapLoader
                containerElement = { mapContainer }
                googleMapElement = {
                    <GoogleMap
                        defaultZoom={15}
                        defaultCenter={this.props.center}
                        options={{streetViewControl: false, mapTypeControl: false}}>
                    </GoogleMap>
                } />
        )
    }
}

export default Map

Places.js

import React, { Component } from 'react'

class Places extends Component {
    render(){
        return (
            <div>
                Helloljlk
            </div>
        )
    }
}

export default Places

App.js：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Map from './components/Map'
import Places from './components/Places'

class App extends Component {
    render(){
        const location = {
            lat: 40.7,
            lng: -73.98
        }

        return (
            <div>
                Hello
                <div style={{width: 300, height: 600, background: 'red'}}>
                    <Map center={location} />
                </div>

                <Places />
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

我已经查找了类似的问题，但我们找不到任何有效的方法，即从导入语句中删除{}。

Answer 1

组件GoogleMapLoader在版本6之后已被弃用（请参阅更改日志here）。因此，如果您使用的是该版本，则导入GoogleMapLoader时将无法定义。相反，您现在应该使用withGoogleMap。

<强> Map.js

import React, { Component } from 'react'
import { GoogleMapLoader, GoogleMap, Marker } from 'react-google-maps'

const Map = withGoogleMap(props => (
  <GoogleMap
    defaultZoom={15}
    defaultCenter={props.center}
    options={{streetViewControl: false, mapTypeControl: false}} />
));

<强> App.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Map from './components/Map'
import Places from './components/Places'

class App extends Component {
  render(){
    const location = {
      lat: 40.7,
      lng: -73.98
    }

    const mapContainer = <div style={{height: '100%', width: '100%'}}></div>;

    return (
      <div>
        Hello
        <div style={{width: 300, height: 600, background: 'red'}}>
          <Map 
            center={location}
            containerElement={mapContainer}
          />
        </div>

        <Places />
      </div>
    )
  }
}

加载/导出反应组件的正确语法？

1 个答案: