在React中导出组件时如何避免使用默认导出？

Question

我具有以下功能：

function Modal(props) {}

我以这种方式导出它：

export default Modal;

但是，我想以这种方式将其从index.js文件导出：

export { Modal } from "./Modal";

但是，我得到一个错误...有人知道为什么吗？

Answer 1

您也可以这样导出

export function Model(props) {}

并这样导入

import {Model} from './Model';

Answer 2

做

enumerate

Answer 3

问题是您试图将默认导出的组件导入为命名的导出组件。

import Modal from './Modal'; // that's how we import a "default exported" component
import { Modal } from './Modal' // that's how we import a "named exported" component

要实现所需的目标，可以将主要组件的导出更改为命名导出。或者，您可以像这样将其导入您的index.js文件中：

import Modal from './Modal';

export { Modal };