key is not available as prop in the Child component in ReactJs

问题

I have a parent component in which below component is producing dynamically in map function as below:

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

In this <Listing /> component, I have a Checkbox from react-md as below:

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

I wanted to give the props named key concatenated with id="listSector-0" , id="listSector-1" and so on.

I have tried string-literals but all invain.

Can anyone know that how to give dynamic this.props.key concatenated with id of the checkbox ?

Thanks

回答1:

'key' and 'ref' are reserved words that are not allowed to be passed as props. You can pass another prop with the same value

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

and use it like

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

来源：https://stackoverflow.com/questions/47688465/key-is-not-available-as-prop-in-the-child-component-in-reactjs