我正在使用React,我无法弄清楚这段代码中的错误在哪里。从第 7 行开始,它说 div 没有结束标签。然后,我在第 13、14、91、93、94 和 101 行出现了同样的错误。我正在参加黑客马拉松,但我不知道如何解决这个问题。
import React from "react"
import Navbar from "./navbar"
// import Footer from "./footer"
function Questions(){
return (
<div>
{/* <!-- Q&A PAGE --> */}
{/* <!-- Navigation Bar --> */}
<Navbar/>
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">
<a href="{{ url_for('home')}}" class="nav-link px-2 text-body-secondary"
<form action="#" method = "post">
{/* <!-- Asks for name of the person --> */}
<p style = "margin-left: 50px;"> name </p>
<p style = "margin-left: 50px;"> <input type="text" name = "name"> </input> </p>
<p style = "margin-left: 50px;"> Race </p>
<ul>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "Black"> Black </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "East_Asian"> East Asian </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "Latinx"> Latinx </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "South_Asian"> South Asian </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "South_Asian"> South Asian </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "White"> White </input> </p>
</ul>
<p style = "margin-left: 50px;"> Gender </p>
<ul>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "gender" value = "Male"> Male </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "gender" value = "Female"> Female </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "gender" value = "Non-binary"> Non-binary </input> </p>
</ul>
<p style = "margin-left: 50px;"> Sexuality </p>
<ul>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Gay/Lesbian"> Gay/Lesbian </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Bisexual"> Bisexual </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Queer"> Queer </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Intersex"> Intersex </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Asexual"> Asexual </input> </p>
</ul>
<p style = "margin-left: 50px;"> Religion </p>
<ul>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Athiest"> Athiest </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Hindu"> Hinduism </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Islam"> Islam </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "Religion" value = "Christianity"> Christianity </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Agnostic"> Agnostic </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Buddhism"> Buddhism </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Judaism"> Judaism </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Sikhism"> Sikhism </input> </p>
</ul>
<p style = "margin-left: 50px;"> <input type="submit" value = "value"/> </p>
</form>
{/* <!-- FOOTER --> */}
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">
<a href="home.html" class="nav-link px-2 text-body-secondary"
>Home</a>
</li>
<a href="{{ url_for('trending')}}" class="nav-link px-2 text-body-secondary"
>Trending</a
>
</li>
<li class="nav-item">
<a href="{{ url_for('response')}}" class="nav-link px-2 text-body-secondary"
>Book Lists</a
>
</li>
<li class="nav-item">
<a href="{{ url_for('questions')}}" class="nav-link px-2 text-body-secondary"
>Q&A</a
>
</li>
</ul>
<p class="text-center text-body-secondary">© Book Website's name</p>
</footer>
</div>
{/* <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script> */}
</div>
);
}
); }
export default Questions
好吧,这段代码有太多错误......标签到处都是。我不太明白你想要获得的结构,比如为什么无序列表中有一个
<form>
(<ul>
),为什么页面上有两个 <footer>
标签,但我尝试过重做大部分内容,这样它就可以变得更好......
首先,你的代码,添加注释作为注释,这样你就会知道问题出在哪里以及我更改了什么。
import React from "react" import Navbar from "./navbar" // import Footer from "./footer"
function Questions(){ return ( {/* */}
// FIRST OFF, THE ENTIRE FUNCTIONAL COMPONENT'S JSX IS SUPPOSED TO BE CONTAINED IN ONE TAG. NO SIBLINGS. JUST PARENT AND CHILDREN
{/* <!-- Navigation Bar --> */}
<Navbar/>
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">
<a href="{{ url_for('home')}}" class="nav-link px-2 text-body-secondary"
// YOU DIDN'T CLOSE THIS <a> TAG 👆🏽
// ALSO, I AM GOING TO BELIEVE EVERYTHING ABOVE THIS, UP TO THE <footer> TAG IS A MISTAKE, CAUSE IT HAS A FOOTER AT THE TOP OF THE PAGE AND THERE IS A SIMILAR NOT-CUT-OFF VERSION AT THE BOTTOM OF THE PAGE, SO I'LL JUST SCRAPE IT OFF
<form action="#" method = "post">
{/* <!-- Asks for name of the person --> */}
<p style = "margin-left: 50px;"> name </p>
<p style = "margin-left: 50px;"> <input type="text" name = "name"> </input> </p>
{/* BEST PRACTICE TO USE <label>s, NOT <p>s, AND THEN LINK THEM TO THE INPUT (WHICH IS SELF-CLOSING i.e: <input />) USING THE INPUT'S IDs AND THE LABEL'S for */}
<p style = "margin-left: 50px;"> Race </p>
<ul>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "Black"> Black </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "East_Asian"> East Asian </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "Latinx"> Latinx </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "South_Asian"> South Asian </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "South_Asian"> South Asian </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "race" value = "White"> White </input> </p>
</ul>
<p style = "margin-left: 50px;"> Gender </p>
<ul>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "gender" value = "Male"> Male </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "gender" value = "Female"> Female </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "gender" value = "Non-binary"> Non-binary </input> </p>
</ul>
<p style = "margin-left: 50px;"> Sexuality </p>
<ul>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Gay/Lesbian"> Gay/Lesbian </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Bisexual"> Bisexual </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Queer"> Queer </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Intersex"> Intersex </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "sexuality" value = "Asexual"> Asexual </input> </p>
</ul>
<p style = "margin-left: 50px;"> Religion </p>
<ul>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Athiest"> Athiest </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Hindu"> Hinduism </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Islam"> Islam </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "Religion" value = "Christianity"> Christianity </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Agnostic"> Agnostic </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Buddhism"> Buddhism </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Judaism"> Judaism </input> </p>
<p style = "margin-left: 50px;"> <input type="checkbox" name = "religion" value = "Sikhism"> Sikhism </input> </p>
</ul>
<p style = "margin-left: 50px;"> <input type="submit" value = "value"/> </p>
{/* ONCE AGAIN, INPUTS ARE SELF CLOSING, I THINK YOU MEANT TO USE PLACEHOLDERS NOT WHAT YOU DID UP THERE. ALSO, ALL THOSE <p style = "margin-left: 50px;">S WERE REALLY UNNECESSARY AND COULD'VE BEEN DONE WITH DIVs THAT ARE STYLED BY A CERTAIN CLASS CONTROL IN CSS. */}
{/* There were two South Asian in the race section, so I removed one */}
</form>
{/* <!-- FOOTER --> */}
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">
<a href="home.html" class="nav-link px-2 text-body-secondary"
>Home</a>
</li>
<a href="{{ url_for('trending')}}" class="nav-link px-2 text-body-secondary"
>Trending</a
>
</li>
<li class="nav-item">
<a href="{{ url_for('response')}}" class="nav-link px-2 text-body-secondary"
>Book Lists</a
>
</li>
<li class="nav-item">
<a href="{{ url_for('questions')}}" class="nav-link px-2 text-body-secondary"
>Q&A</a
>
</li>
</ul>
<p class="text-center text-body-secondary">© Book Website's name</p>
</footer>
</div>
{/* <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script> */}
</div>
); }
export default Questions
这就是我设法改变它的方法,虽然不完美,但这应该可行:
import React from "react";
import Navbar from "./navbar";
// import Footer from "./footer"
function Questions() {
return (
<>
<Navbar />
<div class="container">
<form action="#" method="post">
{/* <!-- Asks for name of the person --> */}
<div className="formControl">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div className="formControl"> Race </div>
<ul>
<div className="formControl">
<input
type="checkbox"
name="race"
value="Black"
id="Black"
placeholder="Black"
/>
<label htmlFor="Black">Black</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="race"
value="East_Asian"
id="EastAsian"
placeholder="East Asian"
/>
<label htmlFor="EastAsian">East Asian</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="race"
value="Latinx"
id="Latinx"
placeholder="Latinx"
/>
<label htmlFor="Latinx">Latinx</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="race"
value="South_Asian"
id="SouthAsian"
placeholder="South Asian"
/>
<label htmlFor="SouthAsian">South Asian</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="race"
value="White"
id="White"
placeholder="White"
/>
<label htmlFor="White">White</label>
</div>
</ul>
<div className="formControl"> Gender </div>
<ul>
<div className="formControl">
<input
type="checkbox"
name="gender"
value="Male"
id="Male"
placeholder="Male"
/>
<label htmlFor="Male">Male</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="gender"
value="Female"
id="Female"
placeholder="Female"
/>
<label htmlFor="Female">Female</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="gender"
value="Non-binary"
id="Nonbinary"
placeholder="Non-binary"
/>
<label htmlFor="Nonbinary">Non-binary</label>
</div>
</ul>
<div className="formControl"> Sexuality </div>
<ul>
<div className="formControl">
<input
type="checkbox"
name="sexuality"
value="Gay/Lesbian"
id="GayLesbian"
placeholder="Gay/Lesbian"
/>
<label htmlFor="GayLesbian">Gay/Lesbian</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="sexuality"
value="Bisexual"
id="Bisexual"
placeholder="Bisexual"
/>
<label htmlFor="Bisexual">Bisexual</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="sexuality"
value="Queer"
id="Queer"
placeholder="Queer"
/>
<label htmlFor="Queer">Queer</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="sexuality"
value="Intersex"
id="Intersex"
placeholder="Intersex"
/>
<label htmlFor="Intersex">Intersex</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="sexuality"
value="Asexual"
id="Asexual"
placeholder="Asexual"
/>
<label htmlFor="Asexual">Asexual</label>
</div>
</ul>
<div className="formControl"> Religion </div>
<ul>
<div className="formControl">
<input
type="checkbox"
name="religion"
value="Athiest"
id="Athiest"
placeholder="Athiest"
/>
<label htmlFor="Athiest">Athiest</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="religion"
value="Hindu"
id="Hinduism"
placeholder="Hinduism"
/>
<label htmlFor="Hinduism">Hinduism</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="religion"
value="Islam"
id="Islam"
placeholder="Islam"
/>
<label htmlFor="Islam">Islam</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="Religion"
value="Christianity"
id="Christianity"
placeholder="Christianity"
/>
<label htmlFor="Christianity">Christianity</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="religion"
value="Agnostic"
id="Agnostic"
placeholder="Agnostic"
/>
<label htmlFor="Agnostic">Agnostic</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="religion"
value="Buddhism"
id="Buddhism"
placeholder="Buddhism"
/>
<label htmlFor="Buddhism">Buddhism</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="religion"
value="Judaism"
id="Judaism"
placeholder="Judaism"
/>
<label htmlFor="Judaism">Judaism</label>
</div>
<div className="formControl">
<input
type="checkbox"
name="religion"
value="Sikhism"
id="Sikhism"
placeholder="Sikhism"
/>
<label htmlFor="Sikhism">Sikhism</label>
</div>
</ul>
<div className="formControl">
<input type="submit" value="value" />
</div>
</form>
{/* <!-- FOOTER --> */}
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">
<a href="home.html" class="nav-link px-2 text-body-secondary">
Home
</a>
</li>
<a
href="{{ url_for('trending')}}"
class="nav-link px-2 text-body-secondary"
>
Trending
</a>
{/* </li> */}
<li class="nav-item">
<a
href="{{ url_for('response')}}"
class="nav-link px-2 text-body-secondary"
>
Book Lists
</a>
</li>
<li class="nav-item">
<a
href="{{ url_for('questions')}}"
class="nav-link px-2 text-body-secondary"
>
Q&A
</a>
</li>
</ul>
<p class="text-center text-body-secondary">© Book Website's name</p>
</footer>
</div>
</div>
</>
);
}
export default Questions;
让我知道事情进展如何...👍🏽