Question

我已经写了以下代码：

const TableRow = ({row, i}) => (
<tr key={row.barcode}>
  <td>{i}</td>
  <td>{row.name}</td>
  <td>{row.description}</td>
  <td>{row.brand}</td>
  <td>{row.barcode}</td>
</tr>
);

在另一个组件render（）函数中调用

var table = (<Table striped bordered condensed hover>
                        <thead>
                            <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.products.map((row, i) =>
                                    <TableRow row={row} id={i}/>
                                )
                            }
                        </tbody>
                    </Table>);
 return table;

问题是，在呈现的HTML中，所有<td>标记都没有任何关键属性，所以

 <tr>
  <td></td>
  <td>NAME</td>
  <td>DESCR</td>
  <td>NDARB</td>
  <td>800800800</td>
 </tr>

没有任何关键属性。

Answer 1

键帮助React识别哪些项目已更改，已添加或已删除。

密钥在内部使用，永远不会在DOM中呈现。如果要将其用作标识符，请另外使用id属性。

参考：https://reactjs.org/docs/lists-and-keys.html#keys

Answer 2

那是因为Key是React属性来自React docs：

键帮助React识别哪些项目已更改，已添加或已删除。应该给出数组内部元素的键，以赋予元素稳定的标识

它们不会被渲染到实际的DOM中，它们只在内部使用。

为什么密钥没有显示在HTML呈现的页面中？

2 个答案: