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

Posted 2023-02-21

【中文标题】如何迭代嵌套对象并在 jsx 中渲染？

【英文标题】：How to iterate nested objects and render inside jsx?

【发布时间】：2016-10-29 14:40:43

【问题描述】：

如何在我的 jsx 组件中渲染嵌套地图？

我需要做相当于 javascript for(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) - 不工作

【问题讨论】：

这是 Object.keys + map，而不是 forEach。 forEach 是为了简单地迭代。 map 保留返回值并创建一个新数组。

【参考方案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>
);

【参考方案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 ( 

这更容易阅读。

【讨论】：

如果你关心可读性，也可以使用箭头函数：each(options, item => )