Question

在我的应用程序的React Component库中，我有一个名为Branch的UIC，它具有：

Brand.Logo
Brand.WordMark
Brand.WorkMarkLogo

Brand.Logo和Brand.WordMark可以正常工作，但Brand.WorkMarkLogo在故事书中输出以下错误：

Element 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.

请在此处查看：https://codesandbox.io/s/hmfnu

我在做什么错了？

谢谢

Answer 1

在导出默认模式中，不使用花括号。

import  {Brand}  from "./Brand";

正确的代码。

import  Brand  from "./Brand";

仅在“导出”模式中使用花括号。

export const abc = () => {};


import {abc} from '...';

Answer 2

当您将它们导入并用大括号括起来时，就是在导入named export，而不是default export。

在您的brand/index.js文件中，您在第10行：

 export default Brand;

要在模块中导入默认导出，您必须省略花括号。

因此，在您的root/index.js文件中，将第3行更改为

import Brand from "./Brand";

或者，您可以选择不在brand/index.js文件中导出默认值，并像下面这样更改将导出内容放在类的前面：

export class Brand extends React.Component {
  static Logo = Logo;
  static LogoWordMark = LogoWordMark;
}

使用此方法，您可以通过添加以下内容来添加其他类，例如在同一brand/index.js文件中：

export class Brand2 extends React.Component {
  static Logo2 = Logo2;
  static LogoWordMark2 = LogoWordMark2;
}

然后，您将能够导入两个已命名的导出，例如：https://codesandbox.io/s/react-example-955rf

React中的这种导入导出组件模式有什么问题？

2 个答案: