我如何将密钥道具传递给函数？

Question

我有一个无法解决的关键道具错误。我想我应该通过 key 道具，但它不起作用。这是我的地图功能

<TableRow key={row.id} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
  <TableCell component="th" scope="row">
    <Person lastname={row.lastname} firstname={row.firstname} />
  </TableCell>
  {CalculateHours().map((c) => ( DisplayDate(c, {row}) ))}
</TableRow>

这是我的功能：

const DisplayDate = (c, {row}) => {

if (ParsingTime(row.startDate) > c && ParsingTime(row.startDate) < c+1) {
    return <TableCell key={c} style={cellStyle}><hr style={hrStyle.hr1} width={calculatedWidth(ParsingTime(row.startDate), true)}/></TableCell>
} else if(ParsingTime(row.endDate) > c && ParsingTime(row.endDate) < c+1) {
    return <TableCell key={c} style={cellStyle}><hr style={hrStyle.hr2} width={calculatedWidth(ParsingTime(row.endDate), false)} /></TableCell>
} else if(ParsingTime(row.startDate) > c || ParsingTime(row.endDate) < c+1) {
    return <TableCell key={c} style={cellStyle}><hr style={hrStyle.hr3} /></TableCell>
} else {
    return <TableCell key={c} style={cellStyle}><hr style={hrStyle.hr1} /></TableCell>
}

};

如何传递密钥？谢谢解答

Answer 1

react 文档说键应该在兄弟对象中 -> https://reactjs.org/docs/lists-and-keys.html#:~:text=Example%3A%20Incorrect%20Key%20Usage

所以对于你的代码，在做地图的时候应该在 DisplayDate 组件中。