ReactJS 有什么问题"导入"和"导出"可能只出现在顶层？

Question

我的代码反应出了什么问题

export const BeritaView = ({ match }) => {
const article = articles.find(item => item.id === match.params.id);
console.log(articles, match.params.id);
return(
<div>
<h3> News ID: {match.params.id} </h3>
<h4> {article.title} </h4>
<p> {article.content} </p>
<Link to={`/berita`}> Back to Berita dan Kegiatan </Link>
</div>
)  
}

错误调用此：

">

导入"和"导出"只能显示在顶层

谁能帮我？

Answer 1

当您在 react 代码中错过右括号时，您会收到此错误。

Answer 2

ES6 模块是静态的。这意味着export/import不能出现在函数、条件语句或包含变量中。这主要是出于效率原因。

该错误意味着您已嵌套在export的某个位置 - 可能在函数内。

---

静态结构在语法上由仅允许顶级模块强制执行，绝不允许嵌套。这意味着代码结构在编译时是已知的，这允许消除死代码，更小的捆绑包大小和更快的查找。

我建议阅读这篇文章。

Answer 3

大多数情况下，我会遇到此错误，当您错过括号时会发生这种情况。

Answer 4

确保所有括号都已关闭。

查看示例

const MyComponent= () => {
return (
<>Data</>
);
}; /* <--- like this bracket */
export default MyComponent;