如何让 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}`]);
   
})

查看 MDN 文档以获取有关 template literals.

的更多详细信息

检查 this answer 以了解有关括号表示法的更多详细信息。

Answer 2

利用template literals创建一个动态键，因为它是动态键，你应该使用括号符号来访问对象属性

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>
))}

如何让 React 评估动态变量？

How to have React evaluate a dynamic variable?

javascript

reactjs

redux-form

react-redux-form