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]

这给key赋予了EksamenssettRow，但是每个EksamenssettRow都收到了相同的key='.0'我该如何解决？

Answer 1

您需要做的是在map中设置第二个参数以建立索引，然后为最高级别的JSX元素提供一个道具key={index}

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

1 个答案: