Reactjs 出口'；默认值'；在'；中找不到（重新导出为'；模态'；）/情态动词

为什么我从故事书中得到以下警告：

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';

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;

/src/components/Modal/ModalNew.js

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

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;

从“React”导入React；
从“道具类型”导入道具类型；
从“./StyledModal”导入StyledModal；
从“./头”导入头；
从“/Body”导入正文；
const ModalNew=({
儿童
休息
}) => (
{儿童}
);
ModalNew.Header=头；
ModalNew.Body=Body；
ModalNew.propTypes={
子项：PropTypes.node.isRequired，
};
导出默认ModalNew；

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 { Modal, ModalNew, ModalVideo } from './Modal';

或者更简短地说：

export * from './Modal';

当然，最好确保

ModalNew

、

ModalAdapter

和

ModalVideo

不使用默认导出，而是也导出命名实体，这样您的

Modal

代码也不需要做奇怪的默认别名，但您可以说：

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

---

@Mike'Pomax'Kamermans感谢您的回复/帮助。我不确定我是否遵循了这个问题/建议。你介意发布一个关于如何解决这个问题的答案吗？感谢感谢，更新为“export*from./Modal”；成功了。请随意将此作为答案，我会将其标记为已接受。再次感谢你的来信。但一定要通读一遍，这是基本的现代JS，而不是“React”，所以如果您使用导入/导出语句，那么理解JS功能是非常值得的。