React Js-看不到html标签内的prop值作为键

Question

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

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

id 由uuid 生成，类似于62b82703-12f5-4fe6-903c-b875aa69246a

这可能是什么原因？

这是我的组件：

    import React, { Component } from "react";
import { Button } from "react-bootstrap";

class Course extends Component {
  updatedGrade = e => {
    this.props.updateCourseGrade(
      Number(e.currentTarget.value),
      Number(e.target.id)
    );
  };
  render() {
    const { id, courseName, courseGrade, courseType } = this.props.course;
    return (
      <tr key={id}>
        <td>
          {courseType == 0 ? "מכינה" : "אקדמי"} - {courseName} - {id}
        </td>
        <td>{courseGrade}</td>
        <td>
          <Button
            onClick={this.props.removeCourse.bind(this, id)}

            variant="danger"
          >
            הסר
          </Button>
        </td>
      </tr>
    );
  }
}

const btnStyle = {
  background: "#ff0000",
  color: "#fff",
  padding: "5px 20 px",
  border: "0px"
};

export default Course;

Answer 1

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

Answer 2

您是否使用谷歌浏览器开发者工具检查？ key 不会出现在开发工具上。考虑使用 reactJS devtool（可以通过 chrome 扩展商店下载）在 devtool 上查看 react 组件，不能直接通过默认开发者工具查看 react 组件。

key 不是有效的 html 属性，它是特定于反应的，这就是您无法通过 chrome 开发人员工具检查看到的原因。

Answer 3

同时添加key 和id：

<tr key={id} id={id}>...</tr>