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

Posted 2023-02-21

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

【英文标题】：Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) React JS

【发布时间】：2020-11-06 19:41:46

【问题描述】：

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

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

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;

... App.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"  />
      </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')
);

【问题讨论】：

详细说明错误日志。错误不清楚。提示：切勿公开发布您的 API_KEYS（最好将其删除）

你在哪里渲染App？你似乎没有从 App.js 导出任何东西，你是在同一个文件中调用 ReactDOM.render() 吗？

我在编译代码时没有收到任何错误。它只是在网页中给了我那个错误，它在本地提供服务

也许你忘了export default App？

不，我只是忘了把它粘贴在这里

【参考方案1】：

我终于明白我做不到

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

它必须是

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