React.js JSX 片段错误和 HTML 缺少标签

Question

在 Visual Studios 代码中，它一直告诉我我在最后缺少 <div> 和 <form> 结束标记，而我已经为两者设置了结束标记。我多次梳理了我的代码，并确信错误不是因为结束标记而是因为我使用了片段。我是 React 的新手，因此不太了解如何使用片段，任何见解都将不胜感激。这是我的代码：

import React, { Component } from 'react';
export default class CreatePatient extends Component {
 render(){
    return(
        <>
        <section class="joinnetwork sec-apply">
            <div class="container">
                <div class="row text-center">
                    <div class="col-md-12">
                        <div class="border-line text-center"></div>
                        <h1>SIGN UP</h1>
                    </div>
                </div>
            </div>
        </section>

        <div class="container">
            <div class="flip-sp">
                <center>
                    <div class="icon">
                        <img src={ require('./img/logo-small.png') } />
                    </div>
                </center>
            </div>
        </div>

        <section class="contact-section area-padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <form class="form-contact contact_form" action="#" method="post" id="contactForm" >
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                    <input class="form-control" name="name" id="name" type="text" placeholder="NAME"></input>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                    <input class="form-control" name="email" id="email" type="email" placeholder="EMAIL"></input>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                    <input class="form-control" name="phone" id="phone" type="text" placeholder="PHONE NUMBER"></input>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                    <input class="form-control" name="age" id="age" type="text" placeholder="AGE"></input>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                    <input class="form-control" name="city" id="city" type="text" placeholder="CITY"></input>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <select id="state" class="form-control" name="state" form="state">
                                        <option value="STATE">STATE</option>
                                        <option value="ALABAMA">ALABAMA</option>
                                        <option value="ALASKA">ALASKA</option>
                                        <option value="ARIZONA">ARIZONA</option>
                                        </select>          
                                    </div>
                            </div>
                            <div class="col-sm-8">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <p> FAMILY SIZE (INCLUDE YOUR SELF)</p>
                                            <input type="checkbox" id="person1" name="person1" value="person1"></input>
                                            <label for="person1"> 1 Person</label><br></br>
                                            <input type="checkbox" id="person2" name="person2" value="person2"></input>
                                            <label for="person2"> 2 Person</label><br></br>
                                            <input type="checkbox" id="person3" name="person3" value="person3"></input>
                                            <label for="person3"> 3 Person</label><br></br>
                                            <input type="checkbox" id="person4" name="person4" value="person4"></input>
                                            <label for="person4"> 4 Person</label><br></br>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group mt-3 text-center">
                                <button type="submit" class="button button-contactForm">SUBMIT</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
</>      
    )
}
}

当我运行只有前两个代码块（第一个 <section> 和第二个 <div>）被一个片段 <>...</> 包围时，代码编译并工作，但只有当我添加这个第三大块时，事情才变得一团糟。

Answer 1

你在标签前少了一个

试试这个：

     <>
    <section class="joinnetwork sec-apply">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-12">
                    <div class="border-line text-center"></div>
                    <h1>SIGN UP</h1>
                </div>
            </div>
        </div>
    </section>

    <div class="container">
        <div class="flip-sp">
            <center>
                <div class="icon">
                    <img src={require('./img/logo-small.png')} />
                </div>
            </center>
        </div>
    </div>

    <section class="contact-section area-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <form class="form-contact contact_form" action="#" method="post" id="contactForm" >
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <input class="form-control" name="name" id="name" type="text" placeholder="NAME"></input>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <input class="form-control" name="email" id="email" type="email" placeholder="EMAIL"></input>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <input class="form-control" name="phone" id="phone" type="text" placeholder="PHONE NUMBER"></input>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <input class="form-control" name="age" id="age" type="text" placeholder="AGE"></input>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <input class="form-control" name="city" id="city" type="text" placeholder="CITY"></input>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <select id="state" class="form-control" name="state" form="state">
                                        <option value="STATE">STATE</option>
                                        <option value="ALABAMA">ALABAMA</option>
                                        <option value="ALASKA">ALASKA</option>
                                        <option value="ARIZONA">ARIZONA</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-8">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <p> FAMILY SIZE (INCLUDE YOUR SELF)</p>
                                        <input type="checkbox" id="person1" name="person1" value="person1"></input>
                                        <label for="person1"> 1 Person</label><br></br>
                                        <input type="checkbox" id="person2" name="person2" value="person2"></input>
                                        <label for="person2"> 2 Person</label><br></br>
                                        <input type="checkbox" id="person3" name="person3" value="person3"></input>
                                        <label for="person3"> 3 Person</label><br></br>
                                        <input type="checkbox" id="person4" name="person4" value="person4"></input>
                                        <label for="person4"> 4 Person</label><br></br>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group mt-3 text-center">
                                <button type="submit" class="button button-contactForm">SUBMIT</button>
                            </div>
                          </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
</>

Answer 2

您错过了 div 的相应收盘。我已经使用下面的代码更正了它

 <>
        <section class="joinnetwork sec-apply">
          <div class="container">
            <div class="row text-center">
              <div class="col-md-12">
                <div class="border-line text-center"></div>
                <h1>SIGN UP</h1>
              </div>
            </div>
          </div>
        </section>

        <div class="container">
          <div class="flip-sp">
            <center>
              <div class="icon">
                <img src={require("./img/logo-small.png")} />
              </div>
            </center>
          </div>
        </div>

        <section class="contact-section area-padding">
          <div class="container">
            <div class="row justify-content-center">
              <div class="col-lg-8">
                <form
                  class="form-contact contact_form"
                  action="#"
                  method="post"
                  id="contactForm"
                >
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group">
                        <input
                          class="form-control"
                          name="name"
                          id="name"
                          type="text"
                          placeholder="NAME"
                        ></input>
                      </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group">
                        <input
                          class="form-control"
                          name="email"
                          id="email"
                          type="email"
                          placeholder="EMAIL"
                        ></input>
                      </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group">
                        <input
                          class="form-control"
                          name="phone"
                          id="phone"
                          type="text"
                          placeholder="PHONE NUMBER"
                        ></input>
                      </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group">
                        <input
                          class="form-control"
                          name="age"
                          id="age"
                          type="text"
                          placeholder="AGE"
                        ></input>
                      </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group">
                        <input
                          class="form-control"
                          name="city"
                          id="city"
                          type="text"
                          placeholder="CITY"
                        ></input>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="form-group">
                        <select
                          id="state"
                          class="form-control"
                          name="state"
                          form="state"
                        >
                          <option value="STATE">STATE</option>
                          <option value="ALABAMA">ALABAMA</option>
                          <option value="ALASKA">ALASKA</option>
                          <option value="ARIZONA">ARIZONA</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-8">
                    <div class="col-sm-12">
                      <div class="form-group">
                        <p> FAMILY SIZE (INCLUDE YOUR SELF)</p>
                        <input
                          type="checkbox"
                          id="person1"
                          name="person1"
                          value="person1"
                        ></input>
                        <label for="person1"> 1 Person</label>
                        <br></br>
                        <input
                          type="checkbox"
                          id="person2"
                          name="person2"
                          value="person2"
                        ></input>
                        <label for="person2"> 2 Person</label>
                        <br></br>
                        <input
                          type="checkbox"
                          id="person3"
                          name="person3"
                          value="person3"
                        ></input>
                        <label for="person3"> 3 Person</label>
                        <br></br>
                        <input
                          type="checkbox"
                          id="person4"
                          name="person4"
                          value="person4"
                        ></input>
                        <label for="person4"> 4 Person</label>
                        <br></br>
                      </div>
                    </div>
                  </div>
                  <div class="form-group mt-3 text-center">
                    <button type="submit" class="button button-contactForm">
                      SUBMIT
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </section>
      </>

React.js JSX 片段错误和 HTML 缺少标签

React.js JSX Fragment errors and HTML missing Tags

javascript

jsx

reactjs

react-fragment