Question

我试图从构造函数中的组件设置关键道具。这是我得到的地方：

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props)
    this.state = { key: Math.random() }
  }

  render () {
    return (
      <h2>test</h2>
    )   
  }
}


class App extends Component {
  render() {
    return (
        <div>
          { [<Test/>, <Test/>, <Test/>] }
        </div>
    );  
  }
}

export default App;

应用程序在div中呈现ReactDOM。但是我收到了以下警告：

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;丙

如何在组件的构造函数中设置键？

编辑：抱歉，我的问题可能措辞不好。我特意寻找一种方法来在构造函数或其中一个回调中设置组件内部组件的键，而不是从外部设置。有没有办法实现这个目标？

Answer 1

key是您传递给组件的特殊道具名称。你要做的就是分配它。确保相同组件的键都不同。

{ [<Test key='1'/>, <Test key='2'/>, <Test key='3'/>] }

但这不是key的典型用例。 key几乎总是用于像map这样的迭代器，它可以自动生成组件的多个副本。传统方式，但在这种情况下很奇怪，就像这样：

{ [1,2,3].map((num, idx) => <Test key={idx}/>)}

当然，您映射的阵列在实际用例中会包含有意义的数据。 map的索引号参数是用于key的典型值，因为它确保了键的唯一性。

Answer 2

class App extends Component {
  render() {
    return (
        <div>
          { [<Test key={Math.random()} />, <Test key={Math.random()}/>, <Test key={Math.random()} />] }
        </div>
    );  
  }
}

React仅在打印数组时抛出此错误。应该创建数组的位置，在您的情况下，在App组件上，而不是在Test组件上，因为那里没有数组。

关键属性有助于reconciliation进程。

Fyi：钥匙应该是独一无二的，你必须确保钥匙。 Math.random是一种随机密钥，但最终可以两次匹配相同的数字。

如何在创建组件时设置密钥？

2 个答案: