使用 if else 條件顯示學生詳細資訊并希望在學生為空時顯示一些值，例如“資料不可用”
import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row, Col } from "react-flexbox-grid";
import studentData from "./studentData.json";
class App extends React.Component {
render() {
return (
<div>
<h1>Student Details</h1>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Student Nme</th>
<th scope="col">Roll No</th>
<th scope="col">Obtained Marks</th>
</tr>
</thead>
{studentData?.map((studentDetails, index) => {
console.log(studentDetails)
return (
<tbody>
<tr>
<th scope="row">{index}</th>
<td>
{studentDetails.student?.STNAME:"Data Not Available"}
</td>
<td>
{studentDetails.student?.ROLLNO}
</td>
<td>{studentDetails.MREMARKS}</td>
</tr>
</tbody>
);
})}
</table>
</div>
);
}
}
ReactDOM.render(, document.getElementById("cont enter code hereainer"));
uj5u.com熱心網友回復：
使用三元運算子
{studentData?.map((studentDetails, index) => {
console.log(studentDetails)
return (
<tbody>
<tr>
<th scope="row">{index}</th>
<td>
{studentDetails.student ? studentDetails.student.STNAME : Data not available}
</td>
<td>
{studentDetails.student?.ROLLNO}
</td>
<td>{studentDetails.MREMARKS}</td>
</tr>
</tbody>
);
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/466907.html