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

Question

In my App's React Component library, I have a UIC called Branch which has:

Brand.Logo
Brand.WordMark
Brand.WorkMarkLogo

Brand.Logo and Brand.WordMark work fine but Brand.WorkMarkLogo outputs the following error in storybook:

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.

Please see here: https://codesandbox.io/s/hmfnu

What am I doing wrong?

Answer 1

In the export default pattern, curly braces are not used.

import  {Brand}  from "./Brand";

correct code.

import  Brand  from "./Brand";

Only in the 'export' pattern, curly braces are used.

export const abc = () => {};

import {abc} from '...';

Answer 2

When you import and wrap them in curly braces, you're importing a named export , not a default export .

In your brand/index.js file, you have on line 10:

 export default Brand;

To import a default export in the module, you'll have to omit the curly braces.

So in your root/index.js file, change line 3 to

import Brand from "./Brand";

Alternatively, you can choose to NOT export a default in your brand/index.js file, and change put the export in front of your class like this:

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

With this method, you can add additional classes like in the same brand/index.js file by adding :

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

Then you'll be able to import both named exports like: https://codesandbox.io/s/react-example-955rf