导入/导出模式导致的动态 JSX 组件名称问题

Question

我正在构建一个可配置的头像组件，该组件根据我们要组合的头像类型组成不同的头像特征组件。 例如，海盗头像由 PegLeg 组件和 Parrot 组件组成。

最终目标是具有具有所有特征的 const 映射，以便：

const characteristicMapping = {
pegleg: PeglegComponent, // component needed in Pirate avatar
parrot: ParrotComponent, // component needed in Pirate avatar
wand: WandComponent, // not used in Pirate, but used in Wizard.
};

然后基于道具(特征数组)，我们组合出我们需要的特征，例如

// For Pirate avatar with Pirate char. set to default value
const Avatar = ({ avatarCharacteristics = ['pegleg', 'parrot'] }) => (
<div>
{avatarCharacteristics.map(c => characteristicsMapping[c]).map(
(AvatarComponent, i) => <AvatarComponent key={i} />)}
</div>
);

我的理解是，只要AvatarComponent的第一个字母大写，这应该有效，而且确实如此！

但是，根据PeglegComponent和ParrotComponent的导入方式，我似乎遇到了问题。

我正在使用一个名为 Easy Import 的 babel 包来处理包/命名空间。

目前两个 PeglegComponent/ParrotComponent(sep 文件)都有 Easy Import 软件包名称，例如：

// @package Components/Avatar/Characteristics/PeglegComponent
export default PeglegComponent; 
// @package Components/Avatar/Characteristics/ParrotComponent
export default ParrotComponent;

从特征的一个文件夹下来，我有一个索引.js文件，它的布局：

// @package Components/Avatar
import PeglegComponent from 'Components/Avatar/Characteristics/PeglegComponent';
import ParrotComponent from 'Components/Avatar/Characteristics/ParrotComponent';
export default {};
export { PeglegComponent, ParrotComponent };

因此，在组合头像组件中的导入，导入如下所示：

import { PeglegComponent, ParrotComponent } from 'Components/Avatar';
const characteristicsMapping = {
pegleg: PeglegComponent, // component needed for Pirate Avatar
parrot: ParrotComponent, // component needed for Pirate Avatar
};
// For Pirate avatar with Pirate char. set to default value
const Avatar = ({ avatarCharacteristics = ['pegleg', 'parrot'] }) => (
<div>
{avatarCharacteristics.map(c => characteristicsMapping[c]).map(
(AvatarComponent, i) => <AvatarComponent key={i} />)}
</div>
);

在这种情况下，我收到错误：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

更重要的是，如果我安慰.logcharacteristicsMapping我会得到{pegleg: undefined, parrot: undefined}

因此，无论出于何种原因，导入都失败了。奇怪的是，这似乎只是一个动态组件名称问题。例如，如果我这样做它可以工作，具有完全相同的导入：

import { PeglegComponent, ParrotComponent } from 'Components/Avatar';
// For Pirate avatar with Pirate char. set to default value
const Avatar = () => (
<div>
<PeglegComponent />
<ParrotComponent />
</div>
);

起初我以为我根本无法动态组件名称，该功能消失了，但是，后来我发现这可以工作。

import PeglegComponent from 'Components/Avatar/Characteristics/PeglegComponent';
import ParrotComponent from 'Components/Avatar/Characteristics/ParrotComponent';
const characteristicsMapping = {
pegleg: PeglegComponent, // component needed for Pirate Avatar
parrot: ParrotComponent, // component needed for Pirate Avatar
};
// For Pirate avatar with Pirate char. set to default value
const Avatar = ({ avatarCharacteristics = ['pegleg', 'parrot'] }) => (
<div>
{avatarCharacteristics.map(c => characteristicsMapping[c]).map(
(AvatarComponent, i) => <AvatarComponent key={i} />)}
</div>
);

此外，如果我在与 PeglegComponent/ParrotComponent 相同的文件夹中有一个索引.js文件，然后从那里导入它可以工作。

在Components/Avatar/Characteristics中有一个索引.js其中包含：

// @package Components/Avatar/Characteristics
import PeglegComponent from 'Components/Avatar/Characteristics/PeglegComponent';
import ParrotComponent from 'Components/Avatar/Characteristics/ParrotComponent';
export default {};
export { PeglegComponent, ParrotComponent };

然后这有效：

import { PeglegComponent, ParrotComponent } from 'Components/Avatar/Characteristics';
const characteristicsMapping = {
pegleg: PeglegComponent, // component needed for Pirate avatar
parrot: ParrotComponent, // component needed for Parrot avatar
};
// For Pirate avatar with Pirate char. set to default value
const Avatar = ({ avatarCharacteristics = ['pegleg', 'parrot'] }) => (
<div>
{avatarCharacteristics.map(c => characteristicsMapping[c]).map(
(AvatarComponent, i) => <AvatarComponent key={i} />)}
</div>
);

如果我从特征的索引导入内容.js到阿凡达的索引中.js(一个目录向上)，再次失败。

所以我有一些解决方法来解决我的问题，但从Components/Avatar导入似乎不一致我可以直接做，但是如果我尝试从对象映射构造组件数组，组件会出现未定义。

想看看是否有人可以向我解释为什么..这是JSX问题，React问题还是轻松导入问题？或者我了解命名/默认导出的工作原理...？

Answer 1

这似乎是一个简单的语法错误。您应该在每次导入时添加引号，如下所示：

import PeglegComponent from './Components/Avatar/Characteristics/PeglegComponent';

以下是文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import