導入/導出模式引起的動態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;

從Characteristics到一個文件夾，我有一個index.js文件，該文件的布局是：

// @package Components/Avatar

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

export default {};
export { PeglegComponent, ParrotComponent };

因此，在組成Avatar組件中的導入看起來像：

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

更重要的是，如果我進行console.log characteristicsMapping {pegleg: undefined, parrot: undefined}得到{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相同的文件夾中有一個index.js文件，然后從那里導入它就可以了。

在Components/Avatar/Characteristics有一個index.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>
);

如果我將來自特征的index.js的內容導入到Avatar的index.js（向上一個目錄）中，則會再次失敗。

因此，我有一些解決方法來解決我的問題，但是從“ Components/Avatar導入可以直接執行似乎並不一致，但是如果我嘗試從對象映射構造一個組件數組，則該組件出現未定義。

想看看是否有人可以向我解釋為什么。這是JSX問題，React問題還是Easy Import問題？ 還是我對命名/默認導出的工作方式有所了解...？

Answer 1

這似乎是一個簡單的語法錯誤，您應在每次導入時都添加引號，如下所示：

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

這是文檔： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import