如何使用 React.cloneElement 或 React.Children.map 在组件上设置键

Question

我有一个表父组件，我在其中映射数据并设置行。我创建了一个应该用于每一行的组件。我将其作为子道具发送到表组件。这是表组件中的代码：

<TableBody>    
{stableSort(data, getSorting(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(n => {
const isSelected = this.isSelected(n.id);
return React.cloneElement(children, { eksamensett: n, isSelected,  handleClick: (event, id) => this.handleClick(event, id)});
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody> 

这是我正在克隆的子组件：

const EksamenssettRow = ({eksamensett, isSelected, handleClick, onEksamenssetClicked}) => (
<TableRow
hover
onClick={() => onEksamenssetClicked(eksamensett)}
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={eksamensett.id}
selected={isSelected}
>
<TableCell padding="checkbox" onClick={(event) => handleClick(event, eksamensett.id)}>
<Checkbox checked={isSelected}/>
</TableCell>
<TableCell component="th" scope="row" padding="none">
{eksamensett.id}
</TableCell>
<TableCell component="th" scope="row" padding="none">
{eksamensett.klasse.klassekode}
</TableCell>
<TableCell align="left">{eksamensett.navn}</TableCell>
<TableCell align="left">{eksamensett.fastRekkefolge ? 'Fast eksamensset' : 'Randomisert'}</TableCell>
<TableCell align="left">{formatStringToLocalDate(eksamensett.opprettetDatoTid)}</TableCell>
<TableCell align="left">{getElapsedTime(eksamensett.endretDatoTid)}</TableCell>
</TableRow>
);

然后我收到警告：

警告：列表中的每个孩子都应该有一个唯一的"钥匙"道具。

因为这是在反应树中呈现的内容：

<EksamenssettRow>
<TableRow key="1">
<TableRow/>
<EksamenssettRow/>
<EksamenssettRow>
<TableRow key="2">
<TableRow/>
<EksamenssettRow/>
<EksamenssettRow>
<TableRow key="3">
<TableRow/>
<EksamenssettRow/>

如何设置组件本身的键，以避免此警告，这也会导致我的测试失败？ 我也用React.Children.map而不是直接用孩子：

return React.Children.map(this.props.children, child => {
return React.cloneElement(child, { eksamensett: n, isSelected,  handleClick: (event, id) => this.handleClick(event, id)})
})[0]

这给EksamenssettRow带来了key，但每个EksamenssettRow都收到了相同的key='.0'我该如何解决这个问题？

Answer 1

你需要做的是在map中设置第二个参数来索引，然后给最高级别的JSX elment一个道具key={index}