Javascript Reactjs-对象键-如何驱动？

我正在使用

data.map(counter=>key={counter.id},value={counter.value})

通过计数器组件创建对象。 我可以从对象访问道具值，但无法访问密钥。为什么？ 当I

console.log（this）

时，它会检索具有

键的对象，但是，
this.key
或
this.props.key
会检索
未定义的
。并且
此.props.value
正确检索

  const data = [
  { id: 1, value: 0 },
  { id: 2, value: 2 },
  { id: 3, value: 0 }
];

class Counter extends Component {
    render() {
    console.log(this)
      console.log(this.props.key)
       console.log(this.props.value)

      return(<h1>test</h1>)
          }
}

class App extends Component {
  render() {
        return (
      <div>
        { data.map(counter => (
           <Counter 
            key={counter.id}
              value={counter.value} 
            />
        ))}
      </div>); 
  }
}

const数据=[
{id:1，值：0}，
{id:2，值：2}，
{id:3，值：0}
];
类计数器扩展组件{
render（）{
console.log（这个）
console.log（this.props.key）
console.log（this.props.value）
返回（测试）
}
}
类应用程序扩展组件{
render（）{
返回(
{data.map（计数器=>(
))}
); 
}
}
组件无法访问自己的密钥，因为它通过自身对跟踪组件的反应被用作特殊道具。它不是用来作为常规道具的，所以React不会让你使用它

如果您需要将其作为道具访问，请将其作为另一个具有不同名称的道具传递。
组件无法访问自己的关键点，因为它通过自身对跟踪组件的反应被用作特殊道具。它不是用来作为常规道具的，所以React不会让你使用它

如果您需要将其作为道具访问，则将其作为另一个具有不同名称的道具传递。
此代码
data.map（counter=>key={counter.id}，value={counter.value}）
将产生语法错误，而不会在
.map（）
回调函数中创建表达式。
react中的key
不会作为道具传递，他们在内部使用它。考虑通过<代码> ID >代码>道具，这一代码<代码>数据.map（计数器= > {计数器{ID}，value＝{Real.Value}）<代码>将产生语法错误，而不在<代码> .MaP（）/代码>回调函数中创建表达式。<代码>键<代码>不作为道具传递，它们在内部使用。考虑通过<代码> ID>代码>道具，在这种情况下，为什么我们使用密钥？您可以分配密钥，它告诉反应什么作为密钥使用。你就是不能把它带到孩子身上。通过分配键，我们可以控制React跟踪组件的方式，这通常是组件数组的方式，因此React可以正确跟踪数组中的每个元素。在这种情况下，我们为什么使用键？您可以分配键，这会告诉React使用什么作为键。你就是不能把它带到孩子身上。通过指定关键点，我们可以控制React如何跟踪组件，这通常是组件阵列的关键点，因此React可以正确跟踪阵列中的每个单独元素。