[英]React is not rendering data from another component
我在button
下创建了下面的代码。 它在table body
。
<button className="btn btn-sm btn-outline-secondary" onClick={()=>popUp()} >
{flag && (
<div >
<table className="table table-responsive" <tr><td className="bg-primary">Certificate No</td><td className="bg-success">{certificate.certificateNo}</td></tr>
<tr><td className="bg-primary">Sponsor</td><td className="bg-success">{certificate.sponser}</td></tr>
<tr><td className="bg-primary">Protocol No</td><td className="bg-success">{certificate.protoColNo}</td></tr>
<tr><td className="bg-primary">Start Date</td><td className="bg-success">{certificate.startDate}</td></tr>
<tr><td className="bg-primary">End Date</td><td className="bg-success">{certificate.endDate}</td></tr>
<tr><td className="bg-primary">No Of Subjects</td><td className="bg-success">{certificate.noOfSubjects}</td></tr>
<tr><td className="bg-primary">Country</td><td className="bg-success">{certificate.country}</td></tr>
<tr><td className="bg-primary">Request Status</td><td className="bg-success">{certificate.requestStatus}</td></tr>
</table>
</div>
</div>
</div>
)}
<i className="bi bi-search">
</i>
</button>
上述数据是特定组件中表格的一部分。
现在,当我尝试在另一个组件中编写相同的代码时,它只打印 static 数据,但不是渲染结果。
import React from 'react'
const TablePopup = (certificate:any) => {
return (
<div className="popup-box">
<div className=" container box">
<span className="close-icon" >x</span>
<div >
<table className="table table-responsive" >
<tr><td className="bg-primary">Certificate No</td><td className="bg-success">{certificate.certificateNo}</td></tr>
<tr><td className="bg-primary">Sponsor</td><td className="bg-success">{certificate.sponser}</td></tr>
<tr><td className="bg-primary">Protocol No</td><td className="bg-success">{certificate.protoColNo}</td></tr>
<tr><td className="bg-primary">Start Date</td><td className="bg-success">{certificate.startDate}</td></tr>
<tr><td className="bg-primary">End Date</td><td className="bg-success">{certificate.endDate}</td></tr>
<tr><td className="bg-primary">No Of Subjects</td><td className="bg-success">{certificate.noOfSubjects}</td></tr>
<tr><td className="bg-primary">Country</td><td className="bg-success">{certificate.country}</td></tr>
<tr><td className="bg-primary">Request Status</td><td className="bg-success">{certificate.requestStatus}</td></tr>
</table>
</div>
</div>
</div>
)
}
export default TablePopup
我通过写来调用这个App
<TablePopup certificate={certificate}/>
certificate
是数组变量。 response.map((certificate: Certificate,index:number) => {
根据我的说法,证书道具应该像这样在 TablePopup 组件中解构以在组件中使用它或使用 props.certifcate
const TablePopup = ({certificate: any}) => {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.