【发布时间】：2020-11-08 23:00:12
【问题描述】：
在 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>）被片段 <>...</> 包围时，代码编译并工作，但只有当我添加第三个更大的块时搞砸了。
【问题讨论】：
-
而不是使用 <.> ...> 尝试
... 。我以前遇到过这个问题。有时浏览器无法理解 > -
如果这有帮助，请告诉我:)
-
@ImranRafiqRather 这对我没有任何改变，事实证明问题是缺少 div 标签。还是谢谢你！
标签： javascript reactjs jsx react-fragment