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

Question

I have a the following component as a function:

function Modal(props) {}

I export it this way:

export default Modal;

However, I want to export it form its index.js file in this way:

export { Modal } from "./Modal";

But, I get an error... does anyone know why?

Answer 1

You can also export it like this

export function Model(props) {}

and import it like this

import {Model} from './Model';

Answer 2

做

export { default as Modal } from "./Modal";

Answer 3

The problem is that you are trying to import a default exported component as a named exported one.

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

To achieve what you want, you could either change the export of your main component to be a named export. Or you could import it like that in your index.js file:

import Modal from './Modal';

export { Modal };