Come eseguire iterazioni di oggetti nidificati e renderizzare all'interno di jsx?

Question

Come è possibile eseguire il rendering di una mappa nidificata all'interno del mio componente jsx?

Ho bisogno di fare l'equivalente di un javascript per (chiave in groupItem) {} Vedi sotto.

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

PERCHÉ NON QUESTI LAVORI?

groupItem.map - non funziona

Object.keys (GroupItem) .forEach (function (chiave) { - non funziona

Answer 1

Si erano quasi destro con l'Object.keys implementazione, (mappa è una proprietà solo per gli array), ma l'errore di sintassi viene dalla confezione {}. non hai bisogno di fuggire, sei già dentro js sintassi.

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

Answer 2

ho deciso a creare il mio metodo, a causa della goffaggine di questo.

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 ( 

Questo è molto più facile da leggere.