入れ子になったオブジェクトを反復処理し、jsx内でレンダリングする方法はありますか？

Question

jsxコンポーネント内でどのようにネストマップをレンダリングできますか？

（key in groupItem）{} 以下を参照してください。

なぜこのような作業をしないのですか？

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

私が決めました〜へ私の独自の方法を作成する、これのclunkynessのために。

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 ( 

これははるかに読みやすくなります。