React 导入组件名称冲突答案

【问题标题】：React import component names clashingReact 导入组件名称冲突
【发布时间】：2021-04-30 07:23:12
【问题描述】：

不确定如何解决 ReactJS 中两个导入组件之间的冲突，即：

import Select from './FormsUI/Select';
import Select from 'react-select';

基于上述，是否可以使用不同的名称来访问 react-select 库，因为我多次使用来自./FormsUI/Select 的第一个 Select在我的应用中？

【问题讨论】：

【解决方案1】：

您正在从每个模块导入 default 导出，这意味着您可以控制本地名称。所以你可以这样做：

import FormsUISelect from './FormsUI/Select';
import ReactSelect from 'react-select';

如果它们被命名为导出（它们不在您的问题中），您仍然可以使用 as 控制本地名称：

import { Select as FormsUISelect } from './FormsUI/Select';
import { Select as ReactSelect } from 'react-select';

【讨论】：

（FWIW，我在最近一本书 JavaScript: The New Toys 的第 13 章中深入探讨了 import 和 export，包括重命名。我的个人资料中的链接如果你有兴趣。）
第一次导入时是否可以只执行{ Select as ReactSelect } 而根本不执行as，即保留为import Select from './FormsUI/Select';？
@tonyfat - 是的，您只需要重命名其中一个。我只是为了……清楚吗？（不要以为我在那里成功了。:-D）这些名称纯粹是您模块的本地名称，因此您可以使用任何您想要的名称。

【解决方案2】：

使用别名导入其中一个

import * as UISelect from './FormsUI/Select

【讨论】：

【解决方案3】：

import AsyncSelect from 'react-select/async';

如果 select 与另一个 select 组件或库冲突，您可以使用 AsyncSelect 而不是 select。

【讨论】：