React Js-无法将 html 标签内的 prop 值视为键

Question

我有一个组件，由于某种原因，我看不到包含<tr>HTML 标签内的任何变量值。\n在<td>标签之间我可以看到变量值。

\n\n

如果我写，<tr id={id}>我会收到数据，但如果我写，<tr key={id}>我只会收到<tr>代码。

\n\n

id 是由uuid类似这样的 dis生成的62b82703-12f5-4fe6-903c-b875aa69246a

\n\n

原因可能是什么？

\n\n

这是我的组件：

\n\n

    import React, { Component } from "react";\nimport { Button } from "react-bootstrap";\n\nclass Course extends Component {\n  updatedGrade = e => {\n    this.props.updateCourseGrade(\n      Number(e.currentTarget.value),\n      Number(e.target.id)\n    );\n  };\n  render() {\n    const { id, courseName, courseGrade, courseType } = this.props.course;\n    return (\n      <tr key={id}>\n        <td>\n          {courseType == 0 ? "\xd7\x9e\xd7\x9b\xd7\x99\xd7\xa0\xd7\x94" : "\xd7\x90\xd7\xa7\xd7\x93\xd7\x9e\xd7\x99"} - {courseName} - {id}\n        </td>\n        <td>{courseGrade}</td>\n        <td>\n          <Button\n            onClick={this.props.removeCourse.bind(this, id)}\n\n            variant="danger"\n          >\n            \xd7\x94\xd7\xa1\xd7\xa8\n          </Button>\n        </td>\n      </tr>\n    );\n  }\n}\n\nconst btnStyle = {\n  background: "#ff0000",\n  color: "#fff",\n  padding: "5px 20 px",\n  border: "0px"\n};\n\nexport default Course;\n

\n

Answer 1

React 中的键用于为 React 提供识别列表中唯一值的提示。但它们不会作为 prop 传递给组件，也不会在渲染后添加到 DOM 中。如果您想实际查看 DOM 中的 Key，您需要使用不同的 prop 来指定它。