react/html 代码中持续出现标头错误 黑客马拉松帮助

问题描述 投票：0回答：1

不知道错误在哪里！从第 7 行开始，表示 div 没有结束标记。然后第 13、14、91、93、94 和 101 行出现相同的错误。请尽快发送帮助，用于黑客马拉松项目！！！

从“react”导入React 从“./navbar”导入导航栏 // 从“./footer”导入页脚

函数问题(){ 返回 （ {/* */}

    {/* <!-- 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>

）； }

导出默认问题

html reactjs tags
1个回答
0
投票

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.