如何迭代嵌套对象并在jsx中呈现？

本文介绍了如何迭代嵌套对象并在jsx中呈现？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在我的jsx组件中呈现嵌套的地图？

我需要等同于一个javascript（键入groupItem）{}
见下文。

I need to do the equivalent of a javascript for(key in groupItem){}See below.

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
- DOESN T工作

groupItem.map - DOESN'T WORK

Object.keys（groupItem）.forEach（function（key）{
- DOES NOT WORK

Object.keys(groupItem).forEach(function (key){- DOESN'T WORK

推荐答案

你的Object.keys实现几乎是对的，（map只是一个数组的属性），但语法错误来自包裹 {} 。你不需要逃脱，你已经在 js 语法之内。

You were almost right with your Object.keys implementation, (map is a property for arrays only), but the syntax error is coming from the wrapping {}. You don't need to escape, you're already inside js syntax.

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

这篇关于如何迭代嵌套对象并在jsx中呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

GroupItem