नेस्टेड ऑब्जेक्ट्स को फिर से कैसे करें और जेएसएक्स के अंदर प्रस्तुत करें?

Question

मैं अपने जेएसएक्स घटक के अंदर एक नेस्टेड मानचित्र कैसे प्रस्तुत कर सकता हूं?

मुझे जावास्क्रिप्ट के बराबर करने की आवश्यकता है (समूहइटम में कुंजी) {} नीचे देखें।

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

ये काम क्यों नहीं करते?

groupItem.map - काम नहीं करता है

Object.keys (groupItem) .forEach (समारोह (कुंजी) { - काम नहीं करता है

Answer 1

आप अपने Object.keys के साथ लगभग सही थे कार्यान्वयन, (मानचित्र केवल सरणियों के लिए एक संपत्ति है), लेकिन सिंटेक्स त्रुटि रैपिंग से आ रही है {}। आप आप पहले से ही js वाक्य रचना के अंदर कर रहे हैं से बचने के लिए की जरूरत नहीं है,।

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

Answer 2

मैं तय कर लिया है सेवा मेरे इसकी गड़बड़ी के कारण, अपनी खुद की विधि बनाएं।

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 ( 

यह पढ़ने के लिए बहुत आसान है।