尝试执行几行代码时出现导出错误

Question

在尝试执行这行特定代码时，我得到以下错误:

导出'default'(导入为'Contact')在'中找不到。/pages/ContactUs'(可能导出:Contact)

我正在尝试添加一个名为next的按钮，所以当我点击它时，它会导致一个新的选项卡。

import React from 'react';
export const Contact = () => {
const handleClick = () => {
const newWindow = window.open('/new-page', '_blank');
newWindow.addEventListener('load', () => {
newWindow.Contact();
});
}
return (
<button onClick={handleClick}>Contact</button>
);
}

Answer 1

显示的代码确实没有默认导出。它可以通过名称导入:

import { Contact } from './pages/ContactUs';

或者您也可以将其设置为default导出。就我个人而言，我喜欢将声明和导出分开，并将后者放在尽可能清晰的最后:

const Contact = () => {
//...
};
export default Contact;

之后，您可以导入默认值:

import Contact from './pages/ContactUs';

注意，在最后一种情况下，名称Contact不需要来匹配导出的名称，因为它是default导出。但一般来说，为了清晰起见，几乎总是匹配名称。