时间戳

首页 > 解决方案 > 错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）React JS

javascript - 错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）React JS

问题描述

我正在尝试学习反应，但我不理解这个错误。如果我返回一个字符串，那很好，但如果我返回，它会一直给我这个错误。

| | | | 错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

MapsContainer.js

import {GoogleMapReact, withGoogleMap, GoogleMap, Map} from 'google-map-react';
import React, {Component} from 'react';

class MapsContainer extends Component {

    static defaultProps = {
        center: {lat: 23.2341, lng:5.12342},
        zoom: 8
    }

    render() {
      
        
    return(

        <div>
            <GoogleMapReact
                bootstrapURLKeys={{key: 'kjk'}}
                defaultCenter={this.props.center}
                defaultZoom={this.props.zoom}
            > </GoogleMapReact>


        {/* <GoogleMapReact
          bootstrapURLKeys={{
            key: 'YOUR_API_KEY',
            libraries: ['places', 'directions']
          }}
          defaultZoom={11}
          defaultCenter={{ lat: 12.2341, lng: 23.31234 }}
          yesIWantToUseGoogleMapApiInternals={true}
          onGoogleApiLoaded={({ map, maps }) => this.apiHasLoaded(map, maps)} // "maps" is the mapApi. Bad naming but that's their library.
        >
        </GoogleMapReact> */}
        

        </div>
    
    

       
 
        
    );
    }
 };

 export default MapsContainer;

... 应用程序.js

import React from 'react';
import logo from './beer.svg';
import './App.css';
import MapsContainer from './containers/MapsContainer';

function App() {
  return (
    <div className="App">


      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>

      
      <MapsContainer/>
      


    </div>
  );
}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

标签： javascriptreactjs

解决方案

我终于明白我做不到

从 'google-map-react' 导入 {GoogleMapReact, withGoogleMap, GoogleMap, Map}；

相反，它必须是

从“google-map-react”导入 GoogleMapReact；

推荐阅读