Yuvalanmış nesneleri yineleme ve jsx içinde nasıl oluşturulur?

Question

Yuvalanmış bir haritayı jsx bileşenimin içine nasıl yerleştirebilirim?

I (groupItem anahtarın) için bir javascript eşdeğer yapmak gerekir {} aşağıya bakın .

class MyComponent extends React.Component { 
    render() {  
     var options = this.props.options; 
     return (   
      <div> 
       {options.map(function(groupItem, key){ return (
        /* 
         Unexpected Token if using groupItem.map? 
         {groupItem.map(function(){return })} 

        */ 
       )})} 
      </div> 
     ) 
    } 
} 
Dropdown.defaultProps = { 
    options:[{ 
     'groupX':{ 
      'apple':'lovely green apple', 
      'orange':'juicy orange', 
      'banana':'fat banana' 
     } 
    }] 
} 

JSON.stringify(groupItems) === { 
    'groupX':{ 
     'apple':'lovely green apple', 
     'orange':'juicy orange', 
     'banana':'fat banana' 
    } 
} 

NEDEN İŞ NEDİR?

groupItem.map -

Object.keys (groupItem) .forEach (function (tuş) { DOESNT'İŞ -

Answer 1

DOESNT'İŞ Sen Object.keys ile neredeyse bulmuşlar uygulanması, (harita sadece diziler için bir özelliktir), ancak söz dizimi hatası. sen js sözdizimi içine zaten, kaçmak gerekmez {} sarma geliyor.

return (   
    <div> 
     {options.map(function(groupItem, key){ return (
      Object.keys(groupItem).map(function(item){return (
       <YourComponent group={groupItem} item={item} /> 
      );}) 
     );})} 
    </div> 
); 

Answer 2

karar verdim için Bunun kendi clunkynessi nedeniyle kendi yöntemimi oluşturmak.

function each(obj, callback){ 
    return (Array.isArray(obj))? forArray(obj, callback):forObject(obj, callback); 
} 
function forArray(obj, callback){ 
    return obj.map(callback); 
} 
function forObject(obj, callback){ 
    return Object.keys(obj).map(callback); 
} 


class MyComponent extends React.Component { 
    render() {  
     var options = this.props.options; 
     return (   
      <div>      
       {each(options, function(groupItem){ return (      
        each(groupItem, function(key){return ( 

Bu, okunması daha kolaydır.