reactjs中如何插入多维数组数据？

Question

在这里，我包含了我的示例代码。如果它是一维数组，我可以轻松地将 json 数据插入到我的代码中。如何通过 react 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