继承第三方React类组件渲染时报Element type is invalid错误如何解决

问题根因 #

你遇到的报错核心原因是导入的PlacesAutocomplete不是实际的组件类，而是包裹了default属性的CommonJS模块对象：

• 这个npm包编译后使用CommonJS规范导出默认组件，而你的项目用ES Module规范导入时，默认导入拿到的是完整的模块对象而非实际组件类，实际组件类挂载在该对象的default属性下
• 你继承的是一个空模块对象，自然导出的ExtendedPlacesAutocomplete也不是合法的React组件，渲染时就会触发类型不匹配的报错
• 你怀疑的编译后函数类格式问题不成立：Babel编译输出的ES5类和原生ES6类继承行为完全一致，不会导致继承失败

解决方案 #

方案1：修正导入逻辑，拿到正确的组件类继承 #

修改扩展组件的导入代码，从模块对象中取出default属性对应的实际组件类再继承：

// 写法1：用require导入
const PlacesAutocomplete = require('react-places-autocomplete').default;

// 写法2：用ES Module命名空间导入
import * as PlacesAutocompleteModule from 'react-places-autocomplete';
const PlacesAutocomplete = PlacesAutocompleteModule.default;

export default class ExtendedPlacesAutocomplete extends PlacesAutocomplete {
  handleInputKeyDown = (event) => {
    // 你的自定义逻辑
  }
}

方案2：用组件组合替代继承（更推荐） #

React官方优先推荐组合而非继承来扩展组件功能，无需处理类继承的各种坑，实现更稳定：

import PlacesAutocomplete from 'react-places-autocomplete';

export default function ExtendedPlacesAutocomplete(props) {
  const customHandleInputKeyDown = (event) => {
    switch (event.key) {
      // 新增的自定义键盘事件逻辑
      case 'Tab':
        // 你的自定义处理
        break
      default:
        // 可选：保留原组件的默认按键逻辑
        if (props.handleInputKeyDown) props.handleInputKeyDown(event)
    }
  }

  return <PlacesAutocomplete {...props} handleInputKeyDown={customHandleInputKeyDown} />
}

方案3：直接导入源码中的原生类 #

如果一定要继承未编译的原始ES6类，可以直接导入npm包内的源码文件：

import PlacesAutocomplete from 'react-places-autocomplete/src/PlacesAutocomplete.js'

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