键在ReactJs的Child组件中不可用作prop

Question

我有一个父组件，其中以下组件在map函数中动态生成，如下所示：

const renderListing = this.props.listing.map(function(list, index) {
        return (
          <Listing
            key={index}
            title={list.title}
            totalWorkers={list.totalWorkers}
          />
        );
      }, this);

在此<Listing />组件中，我具有一个复选框，react-md如下所示：

import { Checkbox } from "react-md";
class Listing extends React.Component {
  render() {
    return (
<Checkbox id="`listSector-${this.props.key}`" name="list-sector" />
   );
  }
}

我想给命名的道具key串连起来id="listSector-0" , id="listSector-1"等等。

我已经尝试过字符串文字技术，但是都没有成功。

谁能知道如何给动态this.props.key级联id的checkbox？

谢谢

Answer 1

“ key”和“ ref”是保留字，不允许作为道具传递。您可以传递其他具有相同值的道具

const renderListing = this.props.listing.map(function(list, index) {
    return (
      <Listing
        key={index}
        keyId={index}
        title={list.title}
        totalWorkers={list.totalWorkers}
      />
    );
  }, this);

并像这样使用

<Checkbox id="`listSector-${this.props.keyId}`" name="list-sector" />