キーは、私は以下のように<strong>マップ</strong>関数で動的に生成されたコンポーネント以下た親コンポーネント有しReactJs

Question

に子コンポーネントに

小道具として使用できません。この<Listing />コンポーネントで

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

を、私は以下のようにreact-mdからチェックボックス：

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

私は0という名前小道具を与えたかったですはid="listSector-0" , id="listSector-1"と連結されています。

私は文字列リテラルを試しましたが、すべてが呼び出されました。

this.props.keyをidのcheckboxに連結する方法を知っている人はいますか？

おかげ

Answer 1

「キー」と「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" /> 

のようにそれを使用することができます