reactjs - 在 './Modal 中找不到导出 'default' (重新导出为 'Modal' )

Question

为什么我从 Storybook 收到以下警告:

WARNING in ./src/components/index.js 24:0-65
"export 'default' (reexported as 'Modal') was not found in './Modal'

./src/components/index.js 24

export { default as Modal, ModalNew, ModalVideo } from './Modal';

./src/components/Modal/index.js

export { default as ModalNew } from './ModalNew';
export { default as ModalAdapter } from './ModalAdapter';
export { default as ModalVideo } from './ModalVideo';

./src/components/Modal/ModalNew.js

import React from 'react';
import PropTypes from 'prop-types';
import StyledModal from './StyledModal';
import Header from './Header';
import Body from './Body';

const ModalNew = ({
  children,
  ...rest
}) => (
  <StyledModal {...rest}>
    {children}
  </StyledModal>
);

ModalNew.Header = Header;
ModalNew.Body = Body;

ModalNew.propTypes = {
  children: PropTypes.node.isRequired,
};

export default ModalNew;

Answer 1

default对于 JS 模块，这是一个非常特殊的词，规则是如果您要导入的模块没有导出默认值，则不能导入默认值，使用 export default ... .

所以在你显示的代码中，index.js正在导入不存在的默认值:

export { default as Modal, ModalNew, ModalVideo } from './Modal';

相当于:

import { default as Modal, ModalNew, ModalVideo } from './Modal';
export { Modal, ModalNew, ModalVideo };

但是如果我们查看您的模态代码，我们会看到:

export { default as ModalNew } from './ModalNew';
export { default as ModalAdapter } from './ModalAdapter';
export { default as ModalVideo } from './ModalVideo';

它显示了三个命名导出，而不是一个 export default .要导入这些，从字面上做到这一点:

export { Modal, ModalNew, ModalVideo } from './Modal';

或者，甚至更短:

export * from './Modal';

当然，确保 ModalNew 是个好主意。 , ModalAdapter , 和 ModalVideo不要使用默认导出，而是导出命名实体，以便您的 Modal代码也不需要做奇怪的默认别名，但你可以说:

export * from './ModalNew';
export * from './ModalAdapter';
export * from './ModalVideo';