React 导入组件名称冲突

Question

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

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

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

Answer 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';

Answer 2

使用别名导入其中之一

import * as UISelect from './FormsUI/Select

Answer 3

import AsyncSelect from 'react-select/async';

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

React import component names clashing