reactjs - Import' 和'export' 可能只出现在顶层。但它是在顶层和尽头。（盖茨比和反应 JS）
问题描述
我正在创建一个登录页面，但我遇到了一个简单的错误，但在我的代码中找不到原因。对我来说，该组件是绝对合乎逻辑的，并且与任何其他组件的结构相同。
我目前收到以下基于此组件的错误：
./src/sections/landing/Prices.js
Module Error (from ./node_modules/eslint-loader/index.js):
C:\XXXXXXX\xxx-gatsby-1.4\xxx-gatsby\src\sections\landing\Prices.js
232:1 error Parsing error: 'import' and 'export' may only appear at the top level
230 | };
231 |
> 232 | export default Content;
| ^
233 |
✖ 1 problem (1 error, 0 warnings)
我的代码：
import React, { useContext } from "react";
import { Container, Row, Col } from "react-bootstrap";
import GlobalContext from "../../context/GlobalContext";
import imgC from "../../assets/image/l2/jpg/l2-content2-img.jpg";
const Content = () => {
const gContext = useContext(GlobalContext);
const Pricing1 = () => {
const [isMonthly, setIsMonthly] = useState(false);
return (
<>
{/* <!-- Content Area --> */}
<div className="content-section2 pt-12 pb-9 pt-lg-21 pb-lg-25 bg-default-2">
<Container>
<Row className="justify-content-center">
<Col xl="6" lg="8" sm="10">
<div className="section-title text-center mb-12 mb-lg-17">
<h2 className="title gr-text-4 mb-7">
Pricing & Plans
</h2>
<p className="gr-text-8 px-lg-7 px-xl-0">
With lots of unique blocks, you can easily build a page
without coding. Build your next landing page.
</p>
</div>
</Col>
</Row>
</Container>
<Container>
<div className="text-center pt-9">
<div
className="mb-13 d-inline-flex position-relative"
id="pricing-dynamic-deck--head"
>
<span className="period month gr-text-8 gr-text-color ">
Monthly
</span>
<a
href="/#"
className={`btn-toggle mx-3 price-deck-trigger ${
isMonthly ? "" : "active"
}`}
onClick={(e) => {
e.preventDefault();
setIsMonthly(!isMonthly);
}}
>
<span className="round"></span>
</a>
<span className="period year gr-text-8 gr-text-color">
Yearly
</span>
<span className="badge gr-badge text-primary gr-text-12 gr-bg-blue-opacity-1 rounded-pill ml-5 text-uppercase">
Save 25%
</span>
</div>
<Row className="justify-content-center">
<Col lg="4" md="6" sm="10" className="mb-9">
<div className="pricing-card bg-white gr-hover-shadow-1 border text-left pt-9 pb-9 pr-9 pr-xl-13 pl-9 pl-xl-13 bg-white rounded-10">
<div className="price-content">
<span className="small-title gr-text-12 text-primary font-weight-bold text-uppercase">
Starter
</span>
<div className="d-flex align-items-end mt-11 ">
<span className="currency mr-2 gr-text-6 font-weight-bold line-spacing-none text-blackish-blue">
$
</span>
<h2 className="price-value gr-text-2 font-weight-bold line-spacing-none mb-0 text-blackish-blue">
{isMonthly ? "49" : "19"}
<span className="d-none">.</span>
</h2>
<span className="per gr-text-9 text-blackish-blue">
/month
</span>
</div>
<span className="price-bottom-text gr-text-11 mt-5 text-blackish-blue gr-opacity-7 d-inline-flex">
{isMonthly ? "billed monthly" : "billed yearly"}
</span>
<ul className="card-list list-style-check pl-0 mt-7 mt-lg-11">
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Commercial
License
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>100+ HTML UI
Elements
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Unlimited
Domain Support
</li>
<li className="disabled gr-text-9">
<i className="icon icon-simple-remove"></i>6 months
premium support
</li>
<li className="disabled gr-text-9">
<i className="icon icon-simple-remove"></i>Lifetime
updates
</li>
</ul>
</div>
<Button className="with-icon gr-hover-y px-xl-8 px-lg-4 px-sm-8 px-4">
Start Free Trial
<i className="icon icon-tail-right font-weight-bold"></i>
</Button>
<span className="btn-bottom-text d-block gr-text-11 text-blackish-blue gr-opacity-7 mt-5">
No credit card required
</span>
</div>
</Col>
<Col lg="4" md="6" sm="10" className="mb-9">
<div className="pricing-card bg-white gr-hover-shadow-1 border text-left pt-9 pb-9 pr-9 pr-xl-13 pl-9 pl-xl-13 bg-white rounded-10">
<div className="price-content">
<span className="small-title gr-text-12 text-primary font-weight-bold text-uppercase">
Standard
</span>
<div className="d-flex align-items-end mt-11 ">
<span className="currency mr-2 gr-text-6 font-weight-bold line-spacing-none text-blackish-blue">
$
</span>
<h2 className="price-value gr-text-2 font-weight-bold line-spacing-none mb-0 text-blackish-blue">
{isMonthly ? "99" : "49"}
<span className="d-none">.</span>
</h2>
<span className="per gr-text-9 text-blackish-blue">
/month
</span>
</div>
<span className="price-bottom-text gr-text-11 mt-5 text-blackish-blue gr-opacity-7 d-inline-flex">
{" "}
{isMonthly ? "billed monthly" : "billed yearly"}
</span>
<ul className="card-list list-style-check pl-0 mt-7 mt-lg-11">
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Commercial
License
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>100+ HTML UI
Elements
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Unlimited
Domain Support
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>6 months
premium support
</li>
<li className="disabled gr-text-9">
<i className="icon icon-simple-remove"></i>Lifetime
updates
</li>
</ul>
</div>
<Button className="with-icon gr-hover-y px-xl-8 px-lg-4 px-sm-8 px-4">
Start Free Trial
<i className="icon icon-tail-right font-weight-bold"></i>
</Button>
<span className="btn-bottom-text d-block gr-text-11 text-blackish-blue gr-opacity-7 mt-5">
No credit card required
</span>
</div>
</Col>
<Col lg="4" md="6" sm="10" className="mb-9">
<div className="pricing-card bg-white gr-hover-shadow-1 border text-left pt-9 pb-9 pr-9 pr-xl-13 pl-9 pl-xl-13 bg-white rounded-10">
<div className="price-content">
<span className="small-title gr-text-12 text-primary font-weight-bold text-uppercase">
Premium
</span>
<div className="d-flex align-items-end mt-11">
<span className="currency mr-2 gr-text-6 font-weight-bold line-spacing-none text-blackish-blue">
$
</span>
<h2 className="price-value gr-text-2 font-weight-bold line-spacing-none mb-0 text-blackish-blue">
{isMonthly ? "129" : "99"}
<span className="d-none">.</span>
</h2>
<span className="per gr-text-9 text-blackish-blue">
/month
</span>
</div>
<span className="price-bottom-text gr-text-11 mt-5 text-blackish-blue gr-opacity-7 d-inline-flex">
{" "}
{isMonthly ? "billed monthly" : "billed yearly"}
</span>
<ul className="card-list list-style-check pl-0 mt-7 mt-lg-11">
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Commercial
License
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>100+ HTML UI
Elements
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Unlimited
Domain Support
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>6 months
premium support
</li>
<li className="gr-text-9">
<i className="icon icon-check-simple"></i>Lifetime
updates
</li>
</ul>
</div>
<Button className="with-icon gr-hover-y px-xl-8 px-lg-4 px-sm-8 px-4">
Start Free Trial
<i className="icon icon-tail-right font-weight-bold"></i>
</Button>
<span className="btn-bottom-text d-block gr-text-11 text-blackish-blue gr-opacity-7 mt-5">
No credit card required
</span>
</div>
</Col>
</Row>
</div>
</Container>
</div>
</>
);
};
export default Content;
可能是一些简单的语法错误或类似错误。我希望有人有想法或发现错误。
解决方案
你最后缺少 } 。应该：
const Content = () => {
const gContext = useContext(GlobalContext);
const Pricing1 = () => {
const [isMonthly, setIsMonthly] = useState(false);
return (
<>
<content..../>
</>
);
};
}
export default Content;
推荐阅读
- c# - 第一次导航到页面时阻塞主线程
- php - 为什么在 laravel 7.0 中找不到类 Imagick？
- php - 如何在更新方法中查看我通过请求获得的内容？
- perl - 解包函数将如何在 perl 中用于此代码 $str =~ s/([^\w ])/'%'.unpack('H2', $1)/eg;
- python - 在查询集中传递多个对象时的Django ListView分页
- c# - Onion Architecture 数据库映射
- javascript - 如何使用 Rollup 动态提供静态文件（并与 node-resolve 一起工作）？
- javascript - 将事件处理程序附加到在 IFrame 中呈现的 HTML
- javascript - React js材料ui自动完成芯片，里面有一个按钮
- c# - 在 C# excel 导出中设置列名/数据的循环