ReactJS什么是错误的'导入'和'导出'可能只出现在顶层?

tnkciper  于 2022-11-29  发布在  React
关注(0)|答案(4)|浏览(148)

我的代码中有什么错误

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>
   )  
}

错误调用此:
'import'和'export'只能出现在最上层
有人能帮我吗?

mftmpeh8

mftmpeh81#

当您在react代码中缺少一个右括号时,通常会出现此错误。

mnemlml8

mnemlml82#

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

这个错误意味着您在某个地方嵌套了export--可能是在一个函数内部。
静态结构在语法上是由模块强制实现的,只允许顶层的模块,而不允许嵌套。这意味着代码结构在编译时是已知的,这允许死代码的消除,更小的包大小和更快的查找。
我推荐阅读这篇文章。

jmo0nnb3

jmo0nnb33#

大多数时候我遇到这个错误,当你错过一个括号时就会发生这种情况。

093gszye

093gszye4#

确保所有支架关闭。
查看示例

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

export default MyComponent;

相关问题