React中如何从同一文件批量导入多组件与常量？

嘿，这个问题问到点子上了！其实这本质是ES6模块语法的用法，React里完全适用，我给你两种最常用的正确批量导入方式：

1. 针对命名导出的批量导入（推荐） #

如果你的文件（比如Constants.js或MultiComponents.js）里是多个命名导出的常量/组件，比如：

// Constants.js 示例代码
export const var1 = 'Hello';
export const var2 = 'World';
export const UserCard = () => <div>用户卡片</div>;
export const Button = () => <button>点击</button>;

那你可以用import * as 自定义别名 from '文件路径'的语法批量导入所有项：

// 导入侧代码
import * as Constants from './Constants.js';

// 使用时通过别名访问
console.log(Constants.var1);
<Constants.UserCard />

这里的*代表“所有命名导出项”，as后面的别名可以自己定义（比如Constants、MyComponents），既清晰又能避免命名冲突。

2. 针对默认导出对象的批量导入 #

如果你的文件把所有常量/组件打包成一个对象，然后用export default导出，比如：

// Constants.js 示例代码
const allItems = {
  var1: 'Hello',
  var2: 'World',
  UserCard: () => <div>用户卡片</div>
};
export default allItems;

那导入时直接引用这个对象即可，不用写*：

// 导入侧代码
import Constants from './Constants.js';

// 使用方式和上面一样
console.log(Constants.var2);
<Constants.UserCard />

不过这种方式灵活性稍差——如果后续想单独导入某一个项，就不如命名导出方便，所以更推荐第一种方式。

小提醒 #

• 如果文件里同时有默认导出和命名导出，批量导入的*只会包含命名导出项，默认导出需要单独声明：

  import DefaultComponent, * as AllNamedExports from './MyFile.js';
  

• 别名尽量起有意义的名字，避免用all这种太模糊的称呼，提升代码可读性。

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