Schlüssel sind, als Stütze in der Kinderkomponente in ReactJs nicht verfügbar

Question

ich eine übergeordnete Komponente aufweisen, in der unter Komponente dynamisch in Karte Funktion als unten produzieren:

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

In dieser <Listing /> Komponente, ich habe eine Kästchen zum Ankreuzen von react-md wie folgt:

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

I 0 den Requisiten Namen geben wollteverkettet mit id="listSector-0" , id="listSector-1" und so weiter.

Ich habe String-Literale versucht, aber alle Invain.

Kann jemand wissen, dass, wie man dynamischen this.props.key verkettet mit id der checkbox gibt?

Dank

Answer 1

‚Schlüssel‘ und ‚ref‘ Worte sind reserviert, die nicht erlaubt sind, als Requisiten weitergegeben werden. Sie können eine weitere Stütze mit dem gleichen Wert übergeben

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

und verwenden Sie es wie

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