React Native中无法访问导入的类问题排查

我完全懂你在React Native里折腾类和原型时遇到的头疼问题——一会儿是“Db is not a constructor”，一会儿又冒出_Db2相关的错误，肯定折腾坏了。我来给你理清楚正确的写法，以及这些错误常见的原因。

一、ES6类的正确定义与默认导出 #

React Native对ES6类的支持很完善，这也是最推荐的写法，只要规范就不会出问题。比如你要创建一个Db类：

// Db.js
class Db {
  constructor(dbName) {
    this.dbName = dbName;
    // 这里可以初始化数据库连接等逻辑
  }

  // 定义类方法
  getData() {
    return `从${this.dbName}获取数据`;
  }
}

// 默认导出这个类
export default Db;

二、对应的正确导入方式 #

因为用了默认导出，所以导入的时候不需要加大括号：

// 在其他组件或文件中导入
import Db from './Db';

// 实例化使用
const myDb = new Db('myTestDb');
console.log(myDb.getData());

三、如果想用原型方式（函数+原型） #

如果你更习惯用函数构造器加原型的写法，也没问题，注意导出方式要对应：

// Db.js
function Db(dbName) {
  this.dbName = dbName;
}

// 添加原型方法
Db.prototype.getData = function() {
  return `从${this.dbName}获取数据`;
};

// 同样默认导出
export default Db;

导入和实例化的方式和上面ES6类的写法完全一样。

四、常见错误的原因及解决 #

你遇到的“Db is not a constructor”这类错误，大多是导入导出不匹配或者定义语法错误导致的：

• 错误1：默认导出却用了带大括号的导入
  比如你写了export default Db，但导入时写成import { Db } from './Db'，这会导致Db是undefined，自然无法作为构造器使用。
• 错误2：命名导出和默认导出搞混
  如果用了命名导出（比如export class Db {...}），那导入时必须加大括号import { Db } from './Db'，否则也会报错。
• 错误3：类定义不完整
  比如忘记写class关键字，或者构造函数里逻辑有误（不过这个一般不会直接导致“not a constructor”错误，但可能引发其他问题）。
• 错误4：文件路径写错
  导入时的文件路径不对，导致导入的是undefined，也会出现类似错误。

你可以对照上面的正确写法，检查下自己的代码里有没有这些问题，应该就能解决啦。

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