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

标签：category stocked name 示例 price react json Electronics true

形如

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

 

标签：category,stocked,name,示例,price,react,json,Electronics,true
From： https://www.cnblogs.com/-roc/p/17106264.html