Question

我正在使用

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

通过Counter组件创建对象。我可以从对象访问prop值，但不能访问键。为什么？当我console.log(this)时，它检索具有key的对象，但是this.key或this.props.key会检索undefined。并且this.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>); 
  }
}

Answer 1

组件无法访问自己的密钥，因为React自身将其用作特殊的道具来跟踪组件。它并不是要用作常规道具，因此React不允许您访问它。

如果您需要以道具的形式访问它，则将其作为另一个具有不同名称的道具传递。

React.js-对象键-如何生酮？

1 个答案: