Wie verschachtelte Objekte iterieren und in jsx rendern?

Question

Wie kann ich eine verschachtelte Karte innerhalb meiner jsx-Komponente rendern?

Ich muss das Äquivalent von einem Javascript für (Schlüssel in groupItem) {} Siehe unten.

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

WARUM FUNKTIONIEREN DIESE NICHT?

groupItem.map - FUNKTIONIERT NICHT

Object.keys (GroupItem) .forEach (function (key) { -

Answer 1

FUNKTIONIERT NICHT waren Sie fast direkt mit Ihrem Object.keys Implementierung (Karte ist eine Eigenschaft für Arrays nur), aber die Syntaxfehler aus der Verpackung kommt {}. Sie brauchen nicht zu entkommen, Sie sind bereits in js Syntax.

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

Answer 2

ich habe beschlossen, zu erstelle meine eigene Methode, wegen der Ungeschicklichkeit davon.

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 ( 

Dies ist viel einfacher zu lesen.