Javascript React为radiobutton（地图中）提供唯一键警告，忽略提供的唯一键

我有以下代码（显然这只是一个问题的测试用例，生活更复杂…）。此代码有效，但它给出了警告：

数组或迭代器中的每个子级都应该有一个唯一的“键”属性

我对React和javascript非常陌生，但是我确实理解错误，并且我确实理解为什么需要唯一的键。正如你所看到的，我确实提供了钥匙，它们确实是独一无二的

var possible_variants = ["A", "B", "C"];
var variant = "";

class App extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      React.createElement(RadioButton, null)
    );
  }
}

class RadioButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    variant = event.target.value;
  }

  render() {
    return React.createElement(
      "div",
      {
        onChange: this.handleChange
      },

      possible_variants.map(function(my_variant, index) {
        return React.createElement(
          "label",
          null,
          React.createElement("input", {
            type: "radio",
            value: my_variant,
            key: my_variant,
            name: "variant"
          }),
          my_variant
        );
      })
    );
  }
}

ReactDOM.render(
  React.createElement(App, null),
  document.getElementById("container")
);

问题似乎是React“希望”键在包装标签中，即如果我将映射更改为

possible_variants.map(function(my_variant, index) {
  return React.createElement(
    "label",
    {
      key: my_variant // <= here comes the difference
    },
    React.createElement("input", {
      type: "radio",
      value: my_variant,
      name: "variant"
    }),
    my_variant
  );
});

可能的变量.map（函数（我的变量，索引）{
返回React.createElement(
“标签”，
{
key:my_variant/首先，我们都知道，需要一个唯一的密钥

至于代码，第一个实际上没有将键绑定到映射项，第二个也是如此

参考文档，每个元素创建一个级别的DOM元素

在您的第一个代码中，实际上创建了两次，这意味着您的密钥仅绑定在
地图项目
的内部，
地图项目
就在
列表的下方。地图
没有任何密钥

<label>
  <input key={...}/>
</label>



第二个使它正常，所以它来的差异

<label key={...}>
  <input />
</label>



顺便说一下，正如评论所说，您很少有机会使用那些react
顶级API，JSX/TSX只是让它更简单而已

具体相关。
您需要为从
map
返回的根元素提供一个键属性，每个线程都有一个唯一的值，用于React中的关于协调，而且当React检查发生了什么变化时，他必须通过map函数检查返回数组的根元素。另外，为什么不使用JSX呢convenient@YosefTukachinsky，因为我使用Transscrypt的这个，而我当前的设置不起作用，请参阅