React类组件return语句嵌套类及Google地图加载问题

一、解决“export必须在语句外部”报错 #

这个错误的核心原因是你把export语句写在了类组件内部（比如render()方法、return()块里），而export只能放在模块的顶级作用域（文件最外层，不能嵌套在类、函数、条件判断等代码块中）。

修复步骤：

• 检查所有组件代码，把export语句移到文件最外层。比如maps.js里的组件导出，要直接写在类定义外面：

  // maps.js 正确写法
  import React, { Component } from 'react';
  
  export class GoogleMap extends Component {
    // 组件逻辑
    render() {
      return <div>地图容器</div>;
    }
  }
  
  export const MapLoader = () => <div>loading map</div>;
  

• 在App.js中只需通过import导入组件，然后在return()里直接使用组件标签，不需要在return里写任何export：

  // App.js 正确写法
  import React, { Component } from 'react';
  import { GoogleMap, MapLoader } from './maps.js';
  
  class App extends Component {
    render() {
      return (
        <div className="app-container">
          <GoogleMap />
        </div>
      );
    }
  }
  
  export default App;
  

二、解决地图只显示“loading map”不加载的问题 #

结合常见场景，从以下几个方向排查：

1. 确认导入方式正确 #

根据maps.js的导出类型匹配导入语法：

• 如果是两个命名导出（如上面的export class GoogleMap和export const MapLoader），用命名导入：

  import { GoogleMap, MapLoader } from './maps.js';
  

• 如果是默认导出+命名导出（比如export default class GoogleMap加export const MapLoader），导入语法是：

  import GoogleMap, { MapLoader } from './maps.js';
  

2. 检查Google Maps API配置 #

• 确认你的API密钥有效，且已在Google Cloud控制台启用了Maps JavaScript API。
• 检查maps.js中加载Google Maps脚本的代码，确保密钥正确传入：

  // 示例：在componentDidMount中加载脚本
  componentDidMount() {
    const script = document.createElement('script');
    // 替换成你的有效API密钥
    script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_VALID_API_KEY`;
    script.async = true;
    script.onload = () => {
      // 地图初始化逻辑
      this.initMap();
      // 加载完成后关闭loading状态
      this.setState({ isLoading: false });
    };
    document.body.appendChild(script);
  }
  

3. 检查地图容器样式 #

地图需要固定的宽高才能渲染，确保GoogleMap组件里的容器div设置了尺寸：

render() {
  const { isLoading } = this.state;
  if (isLoading) return <MapLoader />;
  // 给地图容器设置宽高样式
  return <div style={{ width: '100%', height: '400px' }} ref={this.mapRef}></div>;
}

4. 调试控制台报错 #

打开浏览器开发者工具（F12）的Console标签，查看具体错误：

• 如果是google is not defined：说明Maps脚本未加载成功，检查脚本URL和密钥。
• 如果是403错误：说明密钥无效或未启用对应API，去Google Cloud控制台排查。
• 如果是容器尺寸错误：调整容器的宽高样式。

内容的提问来源于stack exchange，提问作者Rinne Lee