React/HTML 代码中一致的标头错误

Question

我正在使用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

Answer 1

好吧，这段代码有太多错误......标签到处都是。我不太明白你想要获得的结构，比如为什么无序列表中有一个

<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;

让我知道事情进展如何...👍🏽