当前位置：首页 > React

react实现sku

2026-01-26 12:05:04React

实现 React 中的 SKU 功能

SKU（Stock Keeping Unit）是电商系统中常见的商品规格选择功能，通常用于让用户选择商品的不同属性组合（如颜色、尺寸等）。以下是实现 React SKU 功能的关键步骤：

数据结构设计

定义 SKU 数据结构的核心字段，通常包含规格列表和 SKU 列表：

const skuData = {
  specs: [
    {
      name: '颜色',
      values: [
        { name: '红色', img: 'red.jpg' },
        { name: '蓝色', img: 'blue.jpg' }
      ]
    },
    {
      name: '尺寸',
      values: [
        { name: 'S' },
        { name: 'M' }
      ]
    }
  ],
  skus: [
    {
      id: 1,
      specs: { 颜色: '红色', 尺寸: 'S' },
      price: 100,
      stock: 10
    }
  ]
}

状态管理

使用 React 的 useState 或 useReducer 管理用户选择的规格：

const [selectedSpecs, setSelectedSpecs] = useState({});

规格选择逻辑

实现规格选择时的状态更新和可用性检查：

const handleSpecSelect = (specName, value) => {
  const newSelected = { ...selectedSpecs, [specName]: value };
  setSelectedSpecs(newSelected);

  // 检查其他规格的可用性
  const availableSpecs = checkAvailableSpecs(newSelected);
  setAvailableSpecs(availableSpecs);
}

可用性检查算法

根据当前选择的规格计算哪些规格组合是可用的：

const checkAvailableSpecs = (currentSelected) => {
  const available = {};

  skuData.specs.forEach(spec => {
    available[spec.name] = spec.values.filter(value => {
      const tempSelected = { ...currentSelected, [spec.name]: value.name };
      return hasValidSku(tempSelected);
    });
  });

  return available;
}

完整 SKU 匹配

检查当前选择的规格是否对应一个有效的 SKU：

const hasValidSku = (selected) => {
  return skuData.skus.some(sku => {
    return Object.keys(selected).every(key => 
      sku.specs[key] === selected[key]
    );
  });
}

UI 组件实现

创建规格选择器组件：

const SpecSelector = ({ specs, selectedSpecs, onSelect }) => {
  return (
    <div className="spec-selector">
      {specs.map(spec => (
        <div key={spec.name}>
          <h4>{spec.name}</h4>
          <div className="spec-values">
            {spec.values.map(value => (
              <button
                key={value.name}
                className={selectedSpecs[spec.name] === value.name ? 'active' : ''}
                onClick={() => onSelect(spec.name, value.name)}
              >
                {value.img ? <img src={value.img} alt={value.name} /> : value.name}
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

价格和库存显示

根据匹配的 SKU 显示价格和库存：

const matchedSku = skuData.skus.find(sku => 
  Object.keys(selectedSpecs).every(key => 
    sku.specs[key] === selectedSpecs[key]
  )
);

return (
  <div>
    <SpecSelector 
      specs={skuData.specs} 
      selectedSpecs={selectedSpecs}
      onSelect={handleSpecSelect}
    />
    {matchedSku && (
      <div className="sku-info">
        <p>价格: {matchedSku.price}</p>
        <p>库存: {matchedSku.stock}</p>
      </div>
    )}
  </div>
);

禁用不可选规格

在规格选择器中禁用不可选的规格：

<button
  disabled={!availableSpecs[spec.name].includes(value)}
  // ...其他属性
>
  {value.name}
</button>

完整示例代码

整合以上部分的完整组件示例：

import React, { useState, useEffect } from 'react';

const SkuSelector = ({ skuData }) => {
  const [selectedSpecs, setSelectedSpecs] = useState({});
  const [availableSpecs, setAvailableSpecs] = useState({});

  useEffect(() => {
    setAvailableSpecs(checkAvailableSpecs(selectedSpecs));
  }, [selectedSpecs]);

  const handleSpecSelect = (specName, value) => {
    const newSelected = { ...selectedSpecs, [specName]: value };
    setSelectedSpecs(newSelected);
  };

  // ...其他函数实现

  return (
    <div className="sku-selector">
      <SpecSelector 
        specs={skuData.specs}
        selectedSpecs={selectedSpecs}
        availableSpecs={availableSpecs}
        onSelect={handleSpecSelect}
      />
      {/* 显示匹配的SKU信息 */}
    </div>
  );
};