我如何在 React 上创建动态产品变体选项

Question

我正在创建一个电子商务项目来学习 React，我想这是通过复杂项目学习语言的最佳方式，这样您就可以了解它的各个方面。 但现在我被我到处寻找但找不到的东西困住了。

基本上我想创建一个部分，人们可以在其中添加颜色和尺寸等产品变体，如下例所示

它不必很复杂，但如果我可以根据用户输入的值添加到 object 中，这就是我所需要的。

如果有人可以帮助我，那就太好了！ 谢谢！！！

Answer 1

我想我做过类似的项目。

流程如下：

const [words, setWords] = useState([]);

...

function handleWord(e) {
    if (e.key === "Enter") {
      let temp = words ? words : [];
      temp.push(value);
      setWords(temp);
      setValue("");
    }
  }

...

<input
          type="text"
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={handleWord}
          value={value}
          placeholder="Enter one keyword..."
/>

您可以根据构建 object 的方式来修改它。

那是你要的吗？

Answer 2

在目录中添加产品变体

• 产品的变体是具有不同属性的产品。

执行

• 要实现此功能，您需要三样东西

1. 你需要知道所有独特的铰链及其优先级（目录中产品的所有独特可能属性的集合）例如，在你这里，案例铰链是

[{id:110, hingeName : "Color", priority: 1 }, {id:220, hingeName: "Size", priority:2}]

2. 您需要知道屏幕上当前产品的属性

productData = { 
    id:12132, 
    prodcutImg:'https://abc.img.in', 
    productPrice:'$24', 
    prodAttribute:[{id:110, value:'Black'},{id:220, value:"XL"}],
    variantMeta:
     {
        hinges:[
                  {id:110, hingeName : "Color", priority: 1 }, 
                  {id:220, hingeName: "Size", priority:2}
              ],
        hingesValues: [ 
                       {110: ["Black","Red","White"]},                                   
                       {220: ['XS','S','L','XL','XXL']}
                      ],
        variantsOfCurrentProducts: [
                                     {variant_id:'12131', attributes: { 110:'Black',220:'S'}},
                                     {variant_id:'12132', attributes: { 110:'Red',220:'XL'}},
                                     {variant_id:'12133', attributes: { 110:'White',220:'XS'}},
                                     {variant_id:'12134', attributes: { 110:'Red',220:'XL'}}
                                    ]
      }
}]

• 现在您需要将所有铰链渲染为标题，将铰链值渲染为这些铰链的值。
• 假设您想按优先级升序呈现变体
• 所以现在给定示例的 UI 将类似于以下内容：

Color :
        Red Black White
Size :
        XS S L XL XXL

• 现在您应该将铰链中选择的当前产品属性显示为

Color :
        Red "Black" White
Size :
        XS S L "XL" XXL

注意：我使用“double_quote”来显示当前产品的属性。 您可以在 UI 上使用不同的背景和颜色渲染它。

• 现在确保始终启用最高优先级的铰链，以便用户可以在任何时间点使用 select

• 如果有人单击具有第二高优先级的铰链，则过滤所有具有最高优先级和第二高优先级属性的变体，并将它们呈现为可选值，所有不具有这些属性的变体将禁用它们。