如何迭代嵌套对象并在jsx中渲染？

Question

如何在jsx组件中渲染嵌套映射？

我需要做相当于javascript的(key in groupItem){}见下文.

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(function(key){ - 不工作

Answer 1

你的Object.keys实现几乎是对的,(map是仅用于数组的属性),但语法错误来自包装{}.你不需要逃避,你已经在js语法中.

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