为何在React中可使用自定义名称导入React Bootstrap组件？

核心原因很简单：你用的是ES模块的默认导入语法，而非命名导入，这两种导入规则完全不同。

逐个解答你的疑问： #

• 实际导入的内容是什么？
  不管你写成BsssButtonGroup还是ButtonGroup，导入的都是react-bootstrap/ButtonGroup模块里默认导出的官方ButtonGroup组件本身，两个变量指向的是同一个对象。

• 为何自定义任意名称都能成功导入？
  ES模块里用export default声明的默认导出没有固定的导出名称，导入时你可以用任意变量名接收这个导出内容——这个名字只是你本地代码里的别名，和模块内部的导出名称没关系。

• 为何不遵循“必须导入导出的组件名称”的规则？
  你之前的认知是针对命名导出的情况（比如模块里用export const ButtonGroup = ...导出），这种情况必须用对应名称导入（或用as重命名）。但此处ButtonGroup是默认导出，规则完全不同。

• 向自定义名称的组件传递props，这些props会在哪里被处理？又该如何访问它们？
  不管你给组件起什么本地别名，它本质还是官方的ButtonGroup组件。你传递的所有props都会被ButtonGroup组件内部的逻辑处理，和用原名ButtonGroup时完全一样——正常传props就行，组件内部会按照设计接收、处理这些props，不需要额外操作。

举个模块内部的简化示例，你就能明白：

// react-bootstrap/ButtonGroup 内部逻辑简化
const ButtonGroup = (props) => {
  // 组件内部处理props的逻辑
  return <div className="btn-group" {...props} />;
};

export default ButtonGroup;

你导入时的名字只是本地变量名，完全不影响组件本身的功能。

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