如何在反應js中插入多維數組數據？

Question

在這裏，我已經包含了我的示例代碼。如果它是一維數組意味着，我可以輕鬆地將json數據插入到我的代碼中。如何使用js的多維json數據來實現這一目標？

var Category = React.createClass({ 
    render: function() { 
    return (
     <div> 
      {this.props.data.map(function(el,i) { 
      return <div key={i}> 
       <div> 
        {el.product} 
       </div> 
       <div> 
        {el.quantity} 
       </div> 
      </div>; 
      })} 
     </div> 
    ); 
    } 
}); 

var data = [ 
    { 
     product:"a", 
     quantity:28, 
     sub:[ 
      { 
       subItem:'a' 
      }, 
      { 
       subItem:'b' 
      } 
     ] 
    }, 
    { 
     product:"b", 
     quantity:20, 
     sub:[ 
      { 
       subItem:'a' 
      }, 
      { 
       subItem:'b' 
      } 
     ] 
    } 
]; 


React.render(<Category data={data}/>, document.body); 

Answer 1

您可以創建子類別，如該組件，

var SubCategory = React.createClass({ 
    render: function() { 
    var list = this.props.data.map(function(el, i) { 
     return <li key={i}>{ el.subItem }</li>; 
    }); 

    return <ul>{ list }</ul>; 
    } 
}); 

，並用它在Category組件

{this.props.data.map(function(el,i) { 
    return <div key={i}> 
    <div>{el.product}</div> 
    <div>{el.quantity}</div> 
    <SubCategory data={ el.sub } /> 
    </div>; 
})} 

Example