react 根据json分类显示数据 （react哲学示例部分）

形如

const PRODUCTS = [

  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},

  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},

  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},

  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},

  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},

  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}

]

 

效果

 

 

实现

import React from 'react'


const PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
]

const ProRow = () => {
  let lastCategory = ''
  let rows = [] as any

  PRODUCTS.map(item => {
    if (lastCategory !== item.category) {
      rows.push(
        <b key={item.category}>{item.category}</b>
      )
    }
    rows.push(
      <div key={item.name}>
        <span>{item.name}</span>
        <span>{item.price}</span>
      </div>
    )
    lastCategory = item.category
  })

  return <>{rows}</>
}


const App = () => <ProRow />

export default App