React Native中如何从其他文件导入类及其所有实例对象？

1. 修改Car.js，添加导出语句 #

要让App.js能访问Car类和实例，你需要在Car.js里把这些内容导出，有两种常用方式：

方式一：逐个导出 #

修改Car.js代码，在类和实例声明前加上export关键字：

export class Car {
  constructor(brand, year) {
    this.brand = brand
    this.year = year
  }
}

export let car_1 = new Car("Ford", 2014);
export let car_2 = new Car("BMW", 2020);

方式二：集中导出 #

如果不想在每个变量前加export，可以在文件末尾统一导出需要的内容：

class Car {
  constructor(brand, year) {
    this.brand = brand
    this.year = year
  }
}

let car_1 = new Car("Ford", 2014);
let car_2 = new Car("BMW", 2020);

export { Car, car_1, car_2 };

2. 在App.js中导入并使用 #

在App.js文件顶部，通过import语句引入Car类和实例，之后就能直接使用这些内容：

// 以React Native项目为例，先导入基础组件
import { View, Text } from 'react-native';
import { Car, car_1, car_2 } from './Car';

// 示例组件
export default function App() {
  return (
    <View>
      <Text>第一辆车品牌：{car_1.brand}</Text>
      <Text>第一辆车年份：{car_1.year}</Text>
      <Text>第二辆车品牌：{car_2.brand}</Text>
      <Text>第二辆车年份：{car_2.year}</Text>
      {/* 也可以用导入的Car类创建新实例 */}
      <Text>新车品牌：{new Car("Tesla", 2024).brand}</Text>
    </View>
  );
}

补充说明 #

• 若只需要部分内容，比如只导入car_1，可写import { car_1 } from './Car';
• 如需给导入内容起别名，比如把car_1改名为fordCar，可写import { car_1 as fordCar } from './Car';，之后通过fordCar.brand访问

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