我有这个可重用的组件adminTable
const AdminTable=(props)=>{
const classes = useStyles();
console.log(props);
return(<TableContainer component={Paper}>
<Typography className="typo-table" variant="h5">{props.heading}</Typography>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell className="table-head">S/N</TableCell>
{props.tableHeading.map(item=>(<TableCell className="table-head" key={item} align="left"> {item}</TableCell>))}
<TableCell className="table-head" align="left">Options</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.displayedResult.map((row, i) => (
<TableRow key={row.id}>
<TableCell component="th" scope="row">
{i+1}
</TableCell>
{props.tableDataKey.map((cell)=>(<TableCell key={cell} align="left">{row[cell]}</TableCell>))}
<TableCell align="left"><CustomNavlinkAction to={"/admin/applicant/"+row.userId} /></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>)
}
export default AdminTable;
并且该组件将在下面的组件AdminPageWrapper中使用
const displayedResult = [
{
createdAt: 1584972020777,
updatedAt: 1584972020777,
id: 1,
userId: 1,
comment: "Let's archive this",
createdBy: 2,
info: {
createdAt: 1584962612534,
updatedAt: 1584972020767,
id: 1,
fullName: 'John Doe',
phone: '+2348079821739',
location: 'Ilorin',
age: 23,
email: '[email protected]',
gender: 'Male',
userId: 1,
processed: true
}
}
];
const tableHeading = ["Name", "Email", "Phone", "Comments", "Added by", "Date"];
const tableDataKey = ['info.fullname', 'info.email', 'info.phone', 'comment', 'createdBy', 'createdAt' ];
<AdminTable heading={heading} displayedResult={displayedResult} tableHeading={tableHeading} tableDataKey={tableDataKey} />
如何重构代码以确保姓名,电子邮件和电话显示?