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

Question

在Visual Studio代码中，当我有<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

您错过了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>
</>

Answer 2

您在标记之前缺少

试试这个：

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