reactjs - 我正在渲染一个反应类一些元素似乎有关闭标签的问题，但我确保在它们之间没有未关闭的标签我能做什么？
问题描述
我正在渲染一个反应类，我在渲染函数中对接 HTML，但是有些元素似乎在关闭标签上有问题，因为它报告有一些未关闭的标签，但我确保中间没有未关闭的标签仍然问题还在继续。
我还确保导入是正确的，并且渲染方法只返回一个元素，包括所有其他元素。我该如何解决这个问题？
<div>
<h1 style="text-align: center; margin-top: 10px;margin-bottom: 30px;"><b> Order </b></h1>
<div class="form-group" style="margin-left:25%; margin-right:25%;">
<img style="width: 100%; " />
</div>
<div class="container-fluid">
<h1 style="text-align: center; margin-top: 100px;"></h1>
<form action="/submitOrder" method="POST" onSubmit = {validate()}>
<input type="hidden" name="order[product][name]" />
<input type="hidden" name="order[product][version]" />
<div class="container-fluid">
<div class="bd-example">
<br />
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<div class="form-group" style="margin-left:23%; margin-right:23%;">
<div class="bootstrap-iso">
<div class="container-fluid" style="padding:0px; margin-bottom:15px; ">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<label class="control-label " for="date">
Date
</label>
<div class="input-group" >
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="order[orderStartdate]" placeholder="MM/DD/YYYY" type="text"/>
</div>
</div>
</div>
</div>
</div>
<label class="font-weight-bold" for="Duration">Duration </label>
<input type="text" id="Duration" class="form-control col-md-12" />
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Plugin name</th>
<th scope="col">Camera resolution</th>
<th scope="col">Number of streams</th>
<th scope="col">CPU cores</th>
<th scope="col">Memory (GB)</th>
<th scope="col">GPU model</th>
<th scope="col">GPU utilization</th>
</tr>
</thead>
<tbody>
<input type="hidden" name="order[product][plugin][][name]" />
<input type="hidden" name="order[product][plugin][][pluginVersion]" />
<tr>
<th scope="row"></th>
<td></td>
<td>720p</td>
<td> <input type="text" class="form-control" id="pluginStreams" placeholder="0" /></td>
<td><input type="text" class="form-control" id="pluginCPU" readonly /></td>
<td> <input type="text" class="form-control" id="pluginMemory" readonly /></td>
<td><input type="text" class="form-control" id="gpuModel" readonly /></td>
<td> <input type="text" class="form-control" id="gpuUtilization" readonly /></td>
</tr>
<tr>
<th scope="row"></th>
<td>Total hardware</td>
<td></td>
<td> <input type="text" class="form-control" id="totalPluginStreams" /></td>
<td><input type="text" class="form-control" id="totalPluginCPU" /></td>
<td> <input type="text" class="form-control" id="totalPluginMemory" /></td>
<td> <input type="text" class="form-control" id="totalGPUUtilization" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid">
<h1><b>Deployment Requirements</b></h1>
<p> <h2><b>Note: Final hardware cost will include also the following items </b></h2>
<ol type="1">
<b> <li>ATUN master machine</li></b>
<b> <li>Additional hardware cost per each slave machine for operating system and ATUN management</li> </b>
<b><li>The calculations below assume 16 virtual cores slave machines. Other types will be suported later</li></b>
</ol>
</p>
<div class="form-row">
<div class="form-group col-md-2">
<label for="MachineType">Machine type</label>
<input type="text" class="form-control" id="Master" name="masterMachine" value="Master" readonly />
<input type="text" class="form-control" id="Slave" name="slaveMachine" value="Slave" readonly />
</div>
<div class="form-group col-md-2">
<label for="Model">Model</label>
<input type="text" class="form-control" id="Master" name="masterMachine" value="8 cores" readonly />
<input type="text" class="form-control" id="Slave" name="slaveMachine" value="16 cores" readonly />
<select id="mySelect" class="form-control">
<option value="16">16 cores</option>
<option value="32">32 cores</option>
<option value="40">40 cores</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="MachineCount">Machine count</label>
<input type="text" class="form-control" id="MasterCount" name="order[masterMachine][count]" value="1" readonly />
<input type="text" class="form-control" id="totalSlaveMachines" name="order[slaveMachine][count]" value="1" readonly />
</div>
<div class="form-group col-md-2">
<label for="numberOfCPUs">Virtual CPU cores</label>
<input type="text" class="form-control" id="mastertotalCoresUsed" name="order[masterMachine][TotalCores]" value="8" readonly />
<input type="text" class="form-control" id="totalCoresUsed" name="order[slaveMachine][TotalCores]" readonly />
<input type="text" class="form-control" id="totalCoresUsed" value="12" name="data[items][0][name]" />
</div>
<div class="form-group col-md-2">
<label for="numberOfCPUs">Memory (GB)</label>
<input type="text" class="form-control" id="masterTotalMemoryUsed" name="order[masterMachine][TotalMemory]" value="16" readonly />
<input type="text" class="form-control" id="totalMemoryUsed" name="order[slaveMachine][TotalMemory]" readonly />
</div>
<div class="form-group col-md-2">
<label for="numberOfGPUs">Average # GPU</label>
<input type="text" class="form-control" id="masterTotalGPU" name="order[masterMachine][TotalGPU]" value="0" readonly />
<input type="text" class="form-control" id="slaveTotalGPU" name="order[slaveMachine][TotalGPU]" readonly />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<button type="submit" class="btn btn-primary">Submit order</button>
</div>
</div>
<a href="/products"> <button class="btn btn-primary"> <i class="fas fa-arrow-alt-circle-left" style="margin-right: 5px;"></i>Back</button> </a>
</form>
</div>
</div>
解决方案
试试这个，你的 jsx 有一些问题：
var NewComponent = React.createClass({
render: function() {
return (
<div>
<h1 style={{textAlign: 'center', marginTop: '10px', marginBottom: '30px'}}><b> Order </b></h1>
<div className="form-group" style={{marginLeft: '25%', marginRight: '25%'}}>
<img style={{width: '100%'}} />
</div>
<div className="container-fluid">
<h1 style={{textAlign: 'center', marginTop: '100px'}} />
<form action="/submitOrder" method="POST" onsubmit="{validate()}">
<input type="hidden" name="order[product][name]" />
<input type="hidden" name="order[product][version]" />
<div className="container-fluid">
<div className="bd-example">
<br />
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<div className="form-group" style={{marginLeft: '23%', marginRight: '23%'}}>
<div className="bootstrap-iso">
<div className="container-fluid" style={{padding: '0px', marginBottom: '15px'}}>
<div className="row">
<div className="col-md-12 col-sm-6 col-xs-12">
<label className="control-label " htmlFor="date">
Date
</label>
<div className="input-group">
<div className="input-group-addon">
<i className="fa fa-calendar">
</i>
</div>
<input className="form-control" id="date" name="order[orderStartdate]" placeholder="MM/DD/YYYY" type="text" />
</div>
</div>
</div>
</div>
</div>
<label className="font-weight-bold" htmlFor="Duration">Duration </label>
<input type="text" id="Duration" className="form-control col-md-12" />
</div>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
</div>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<table className="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Plugin name</th>
<th scope="col">Camera resolution</th>
<th scope="col">Number of streams</th>
<th scope="col">CPU cores</th>
<th scope="col">Memory (GB)</th>
<th scope="col">GPU model</th>
<th scope="col">GPU utilization</th>
</tr>
</thead>
<tbody>
<input type="hidden" name="order[product][plugin][][name]" />
<input type="hidden" name="order[product][plugin][][pluginVersion]" />
<tr>
<th scope="row" />
<td />
<td>720p</td>
<td> <input type="text" className="form-control" id="pluginStreams" placeholder={0} /></td>
<td><input type="text" className="form-control" id="pluginCPU" readOnly /></td>
<td> <input type="text" className="form-control" id="pluginMemory" readOnly /></td>
<td><input type="text" className="form-control" id="gpuModel" readOnly /></td>
<td> <input type="text" className="form-control" id="gpuUtilization" readOnly /></td>
</tr>
<tr>
<th scope="row" />
<td>Total hardware</td>
<td />
<td> <input type="text" className="form-control" id="totalPluginStreams" /></td>
<td><input type="text" className="form-control" id="totalPluginCPU" /></td>
<td> <input type="text" className="form-control" id="totalPluginMemory" /></td>
<td> <input type="text" className="form-control" id="totalGPUUtilization" /></td>
</tr>
</tbody>
</table>
</div>
</form></div>
<div className="container-fluid">
<h1><b>Deployment Requirements</b></h1>
<p> </p><h2><b>Note: Final hardware cost will include also the following items </b></h2>
<ol type={1}>
<b> <li>ATUN master machine</li></b>
<b> <li>Additional hardware cost per each slave machine for operating system and ATUN management</li> </b>
<b><li>The calculations below assume 16 virtual cores slave machines. Other types will be suported later</li></b>
</ol>
<p />
<div className="form-row">
<div className="form-group col-md-2">
<label htmlFor="MachineType">Machine type</label>
<input type="text" className="form-control" id="Master" name="masterMachine" defaultValue="Master" readOnly />
<input type="text" className="form-control" id="Slave" name="slaveMachine" defaultValue="Slave" readOnly />
</div>
<div className="form-group col-md-2">
<label htmlFor="Model">Model</label>
<input type="text" className="form-control" id="Master" name="masterMachine" defaultValue="8 cores" readOnly />
<input type="text" className="form-control" id="Slave" name="slaveMachine" defaultValue="16 cores" readOnly />
<select id="mySelect" className="form-control">
<option value={16}>16 cores</option>
<option value={32}>32 cores</option>
<option value={40}>40 cores</option>
</select>
</div>
<div className="form-group col-md-2">
<label htmlFor="MachineCount">Machine count</label>
<input type="text" className="form-control" id="MasterCount" name="order[masterMachine][count]" defaultValue={1} readOnly />
<input type="text" className="form-control" id="totalSlaveMachines" name="order[slaveMachine][count]" defaultValue={1} readOnly />
</div>
<div className="form-group col-md-2">
<label htmlFor="numberOfCPUs">Virtual CPU cores</label>
<input type="text" className="form-control" id="mastertotalCoresUsed" name="order[masterMachine][TotalCores]" defaultValue={8} readOnly />
<input type="text" className="form-control" id="totalCoresUsed" name="order[slaveMachine][TotalCores]" readOnly />
<input type="text" className="form-control" id="totalCoresUsed" defaultValue={12} name="data[items][0][name]" />
</div>
<div className="form-group col-md-2">
<label htmlFor="numberOfCPUs">Memory (GB)</label>
<input type="text" className="form-control" id="masterTotalMemoryUsed" name="order[masterMachine][TotalMemory]" defaultValue={16} readOnly />
<input type="text" className="form-control" id="totalMemoryUsed" name="order[slaveMachine][TotalMemory]" readOnly />
</div>
<div className="form-group col-md-2">
<label htmlFor="numberOfGPUs">Average # GPU</label>
<input type="text" className="form-control" id="masterTotalGPU" name="order[masterMachine][TotalGPU]" defaultValue={0} readOnly />
<input type="text" className="form-control" id="slaveTotalGPU" name="order[slaveMachine][TotalGPU]" readOnly />
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<button type="submit" className="btn btn-primary">Submit order</button>
</div>
</div>
<a href="/products"> <button className="btn btn-primary"> <i className="fas fa-arrow-alt-circle-left" style={{marginRight: '5px'}} />Back</button> </a>
</div>
</div>
);
}
});
推荐阅读
- c# - 我的 addforce 没有在应有的地方工作
- reactjs - 材质 UI：使用 onMouseLeave 道具时弹出窗口中断
- php - 如何在控制器中使用 laravel Auditor
- c++ - Divide et impera 数组错误的元素的总和
- c++ - 在 WM_CREATE 中加载多个位图的 C++ Win32 不会加载
- python - Python/Kivy-iOS/Xcode 环境的模块导入问题
- sql - 如何在多个条件下计算值以及如何设计数据库？
- makefile - make 不解析目标名称的绝对路径
- python-3.x - CSV 输出只取第一组字典
- mongodb - 尝试在 MacOS 上安装 mongoldb