优化以下代码:<div className="groupInfor gd-group"> <div className="header"> <h5>公司股东</h5> </div> <Form.List name="companyList" shouldUpdate={(prevValues, curValues) => prevValues.percent !== curValues.percent }> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, fieldKey, ...restField }, idx) => ( <AddCompany key={key} idx={idx} name={name} fieldKey={fieldKey} isDisabled={isDisabled} restField={restField} remove={remove} form={form} /> ))} <Form.Item > <Button className="new-init-btn offset-t20" onClick={handleAddCompany} style={{ width: 88 }} disabled={isDisabled} >+ 新增</Button> </Form.Item> </> )} </Form.List> </div>
时间: 2024-03-10 13:43:23 浏览: 86
Here are a few optimizations that can be made to this code:
1. Use concise arrow function syntax for the `shouldUpdate` prop of `Form.List`:
```
shouldUpdate={(prevValues, curValues) => prevValues.percent !== curValues.percent}
```
can be simplified to:
```
shouldUpdate={(prev, cur) => prev.percent !== cur.percent}
```
2. Extract the contents of the `Form.List` render prop function into a separate component:
```
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }, idx) => (
<AddCompany key={key} idx={idx} name={name} fieldKey={fieldKey} isDisabled={isDisabled} restField={restField} remove={remove} form={form} />
))}
<Form.Item>
<Button className="new-init-btn offset-t20" onClick={handleAddCompany} style={{ width: 88 }} disabled={isDisabled}>
+ 新增
</Button>
</Form.Item>
</>
)}
```
can be extracted into a component called `CompanyList`:
```
const CompanyList = ({ fields, isDisabled, remove, form, handleAddCompany }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }, idx) => (
<AddCompany key={key} idx={idx} name={name} fieldKey={fieldKey} isDisabled={isDisabled} restField={restField} remove={remove} form={form} />
))}
<Form.Item>
<Button className="new-init-btn offset-t20" onClick={handleAddCompany} style={{ width: 88 }} disabled={isDisabled}>
+ 新增
</Button>
</Form.Item>
</>
);
// Usage:
<Form.List name="companyList" shouldUpdate={(prev, cur) => prev.percent !== cur.percent}>
{(fields, { add, remove }) => (
<CompanyList fields={fields} isDisabled={isDisabled} remove={remove} form={form} handleAddCompany={handleAddCompany} />
)}
</Form.List>
```
By extracting the contents of the `Form.List` render prop function into a separate component, the code becomes more modular and easier to read and maintain.
阅读全文
相关推荐








请分析以下代码中“编辑”按钮为什么没有用?编辑 <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> 烹饪分类信息编辑 <form class="form-horizontal" name="cookClassEditForm" id="cookClassEditForm" enctype="multipart/form-data" method="post" class="mar_t15"> <label for="cookClass_cookClassId_edit" class="col-md-3 text-right">分类id:</label> <input type="text" id="cookClass_cookClassId_edit" name="cookClass.cookClassId" class="form-control" placeholder="请输入分类id" readOnly> <label for="cookClass_className_edit" class="col-md-3 text-right">分类名称:</label> <input type="text" id="cookClass_className_edit" name="cookClass.className" class="form-control" placeholder="请输入分类名称"> <label for="cookClass_cookClassDesc_edit" class="col-md-3 text-right">烹饪分类介绍:</label> <textarea id="cookClass_cookClassDesc_edit" name="cookClass.cookClassDesc" rows="8" class="form-control" placeholder="请输入烹饪分类介绍"></textarea> </form> <style>#cookClassEditForm .form-group {margin-bottom:5px;} </style> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" onclick="ajaxCookClassModify();">提交</button> function cookClassEdit(cookClassId) { $.ajax({ url : basePath + "CookClass/" + cookClassId + "/update", type : "get", dataType: "json", success : function (cookClass, response, status) { if (cookClass) { $("#cookClass_cookClassId_edit").val(cookClass.cookClassId); $("#cookClass_className_edit").val(cookClass.className); $("#cookClass_cookClassDesc_edit").val(cookClass.cookClassDesc); $('#cookClassEditDialog').modal('show'); } else { alert("获取信息失败!"); } } }); } function ajaxCookClassModify() { $.ajax({ url : basePath + "CookClass/" + $("#cookClass_cookClassId_edit").val() + "/update", type : "post", dataType: "json", data: new FormData($("#cookClassEditForm")[0]), success : function (obj, response, status) { if(obj.success){ alert("信息修改成功!"); location.href= basePath + "CookClass/frontlist"; }else{ alert(obj.message); } }, processData: false, contentType: false, }); }










<!DOCTYPE html> <html> <hand> <style> .out{ width: 1460px; height: 750px; border:1px solid #BFBFBF; margin: 20px auto; box-shadow:0px 0px 10px 5px #8e8c8c; } h1{ color:black; text-align: center; font-family: "字魂4086号-雅宋漂泊体"; font-size: 75px; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } .mySlides { display: none; } .prev,.next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover,.next:hover { background-color: rgba(0, 0, 0, 0.8); } .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } </style> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides((slideIndex += n)); } function currentSlide(n) { showSlides((slideIndex = n)); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } </script> </hand> <body> 甘肃美食介绍
❮ ❯ </body> </html>这段代码为什么运行的时候没有轮播图?哪里有问题,正确的代码是怎样的?
