如何仅为react中数组中的第一个元素呈现按钮

Question

我只想为数组中的第一个元素呈现下载按钮，其余的按钮将被禁用

allFileVersions.map((eachVersion) => {
return (
<div className="d-flex">
<div className="">versions:</div>
<div className="">{eachVersion.FileName}</div>
{/* <div>DOwnload</div> */}
<div
className={
"saveblue mg-r-10 " +
(allFileVersions[0]
? ""
: "disabled")
}>
<i className="fas fa-download pd-r-5" /> Download</div>
</div>
);
})

Answer 1

allFileVersions.map((eachVersion, index) => {
return (
<div className="d-flex">
<div className="">versions:</div>
<div className="">{eachVersion.FileName}</div>
{/* <div>DOwnload</div> */}
<div className={"saveblue mg-r-10 " + (index === 0 ? "" : "disabled")}>
<i className="fas fa-download pd-r-5" /> Download</div>
</div>
);
})

Answer 2

allFileVersions.map((eachVersion,index) => {
return (
<div className="d-flex">
<div className="">versions:</div>
<div className="">{eachVersion.FileName}</div>
{index === 0 && (
<div>DOwnload</div>
)}

<div
className={
"saveblue mg-r-10 " +
(allFileVersions[0]
? ""
: "disabled")
}>
<i className="fas fa-download pd-r-5" /> Download</div>
</div>
);
})

map函数提供两个值。迭代的当前项和当前索引。您可以使用索引来检查它是否是第一个项目。

Answer 3

allFileVersions.map((eachVersion，index(=>{返回(版本：｛eachVersion.FileName｝｛/*下载*/｝<divclassName={saveblue mg-r-10 ${index === 0 ? "" : "disabled"}}>下载)；})

请使用逻辑的索引。