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，则需要使用其他道具来指定它。

Answer 2

同时添加key和id：

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

Answer 3

您是否正在使用Google chrome开发者工具检查？ key将不会出现在devtool上。考虑使用reactJS devtool（可以通过chrome扩展存储下载）来检查devtool上的react组件，您不能直接通过默认的开发者工具来检查react组件。

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

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

3 个答案: