Reactが動的変数を評価する方法は？

Question

私は、次のしている：

{this.props.fields.map(field => (
     <div key={field.skill_id}> 
     <Field 
      component={RadioGroup} 
      name={ 'skill_id_' + field.skill_id } 
      title={field.name} 
      activeValue={this.props.formState && this.props.formState.skill_id_${field.skill_id}} 
      required={true} 
      options={[ 
      { title: '1', value: '1' }, 
      { title: '2', value: '2' }, 
      { title: '3', value: '3' }, 
      { title: '4', value: '4' }, 
      { title: '5', value: '5' } 
     ]} /> 

     </div> 
    ))} 

activeValueが正しく評価されていません。この変数を動的に評価する必要があります：

this.props.formState.skill_id_${field.skill_id}} 

私は間違っていますか？

私はあなたがオブジェクトから値がそう[]表記法を使用し得るために、動的キーを使用している

syntax error: Unexpected token, expected } (57:82) 55
name={ 'skill_id_' + field.skill_id } 56
title={field.name} > 57
activeValue={this.props.formState && this.props.formState.skill_id_${field.skill_id}}

Answer 1

を取得します。

はこのようにそれを書く：

activeValue={this.props.formState && 
    this.props.formState[`skill_id_${field.skill_id}`]} 

チェックこのスニペット：

let obj = { 
 
    a1: 1, 
 
    a2: 2, 
 
    a3: 3 
 
}; 
 

 
[1,2,3].forEach(i => { 
 

 
    console.log(`a${i} = `, obj[`a${i}`]); 
 
    
 
})

をtemplate literalsの詳細についてはMDNドキュメントを確認してください。

ブラケット記法の詳細については、this answerを参照してください。

Answer 2

動的なキーを作成するには、 template literalsの

メイクを使用し、それダイナミックキー以来、あなたは、オブジェクトのプロパティをaccesing

this.props.formState[`skill_id_${field.skill_id}`] 

コード用ブラケット表記を使用する必要があります。

{this.props.fields.map(field => (
    <div key={field.skill_id}> 
    <Field 
     component={RadioGroup} 
     name={ 'skill_id_' + field.skill_id } 
     title={field.name} 
     activeValue={this.props.formState && this.props.formState[`skill_id_${field.skill_id}`]} 
     required={true} 
     options={[ 
     { title: '1', value: '1' }, 
     { title: '2', value: '2' }, 
     { title: '3', value: '3' }, 
     { title: '4', value: '4' }, 
     { title: '5', value: '5' } 
    ]} /> 

    </div> 
))}