React如何进行思考构建组件和应用程序 #

import React from "react"
//水果/蔬菜类别组件
function ProductCategoryRow ({ category }) {
  return (
    <tr>
      <th colSpan="2">{category}</th>
    </tr>
  )
}
//价格判断组件
function ProductRow ({ product }) {
  const name = product.stocked ? (product.name) : (
    <span style={{ color: "red" }}>{product.name}</span>
  )
  return (
    <tr>
      <td>{name}</td>
      <td>{product.price}</td>
    </tr>
  )
}
//table 组件
function ProductTable ({ products }) {
  const rows = []
  let lastCategory = null
  products.forEach((product) => {
    if (product.category !== lastCategory) {
      rows.push(
        <ProductCategoryRow
          category={product.category}
          key={product.category}
        />
      )
    }
    rows.push(<ProductRow product={product} key={product.name} />)
    lastCategory = product.category
  })
  return (
    <table>
      <thead>
        <tr>
          <th>名字</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  )
}

function SearchBar () {
  return (
    <form>
      <input type="text" placeholder="Search..." />
      <label>
        <input type="checkbox" /> 仅显示库存产品
      </label>
    </form>
  )
}

function FilterableProductTable ({ products }) {
  return (
    <div>
      <SearchBar />
      <ProductTable products={products} />
    </div>
  )
}

const PRODUCTS = [
  { category: "水果", price: "$1", stocked: true, name: "苹果" },
  { category: "水果", price: "$1", stocked: true, name: "火龙果" },
  { category: "水果", price: "$2", stocked: false, name: "番茄" },
  { category: "蔬菜", price: "$2", stocked: true, name: "菠菜" },
  { category: "蔬菜", price: "$4", stocked: false, name: "南瓜" },
  { category: "蔬菜", price: "$1", stocked: true, name: "豌豆" }
]


export default function App () {
  return <FilterableProductTable products={PRODUCTS} />
}