Продвижение реквизита, чтобы умеренный литерал на карте

Question

Я пытаюсь создать динамический блок выбора. Я передаю исходные данные строки и имя отображаемого имени клавиши. Я не могу объединить объект данных с строковым ключом или отображаемым именем. Благодаря!

const { rowSourceData, rowSourceKey, rowSourceDisplay } = this.props; 
const rowSource = rowSourceData 
    .map(data => {   
     return (
     <option key={data.`${rowSourceKey}`}> {data.`${rowSourceDisplay}`}</option>    
    )  
    }) 

Answer 1

Написать это следующим образом:

const { rowSourceData, rowSourceKey, rowSourceDisplay } = this.props; 
const rowSource = rowSourceData 
    .map((data,i) => {   
     return (
      <option key={i/*data[rowSourceKey]*/}> {data[rowSourceDisplay]}</option>    
     )  
    }) 

Для примера:

obj = {a:1,b:2,c:3,d:4}; 
 
temp = 'c'; 
 
console.log(obj[temp]); // print 3;

Answer 2

Решимость его, как

const rowSource = rowSourceData 
    .map(data => {   
     return (
     <option key={data[rowSourceKey]}> {data[rowSourceDisplay]}</option>    
    )  
    }) 

Однако, поскольку вы используете тот же ключ, вы получите предупреждение о дублировании ключа. Ваш ключ должен быть уникальным. У вас может быть указатель на ключ, например,

const rowSource = rowSourceData 
    .map((data, index) => {   
     return (
     <option key={index}> {data[rowSourceDisplay]}</option>    
    )  
    })