javascript - 如何使用 Array 方法缩短 JSX 代码？

Question

我有一个 ProdSelectArr 组件。这个组件我用了三次，改了三次参数。本质上，我们可以说参数中只有值敏捷 prodSecKey 值发生变化，{arr1 arr2 arr3 setValue1 setValue2 setValue3} 交换位置。

<ProdSelectArr
        arr1={prod.color}
        arr2={prod.price}
        arr3={prod.saiz}
        setValue1={setCategColor}
        setValue2={setCategPrice}
        setValue3={setCategSaiz}
        setValueIndex={setIndexImgProd}
        value={categColor}
        headIndex={indexImgProd.headIndex}
        agility={prod.agility[0]}
        prodSecKey={0.1}
      />
       <ProdSelectArr 
        arr1={prod.price}
        arr2={prod.color}
        arr3={prod.saiz} 
        setValue1={setCategPrice}
        setValue2={setCategColor}
        setValue3={setCategSaiz}
        setValueIndex={setIndexImgProd}
        value={categPrice}
        headIndex={indexImgProd.headIndex}
        agility={prod.agility[1]}
        prodSecKey={0.2}
      />
       <ProdSelectArr
        arr3={prod.color}
        arr2={prod.price}
        arr1={prod.saiz}
        setValue3={setCategColor}
        setValue2={setCategPrice}
        setValue1={setCategSaiz}
        setValueIndex={setIndexImgProd}
        value={categSaiz}
        headIndex={indexImgProd.headIndex}
        agility={prod.agility[2]}
        prodSecKey={0.3}
      />

如何使用数组方法缩短代码？

Answer 1

对于交换，使用这样的东西:

function getItem(element, index) {
  const elementProps = {
    [`arr${index%3}`]: {prod.color},
    [`arr${(index+1)%3}`]: {prod.price},
    [`arr${(index+2)%3}`]: {prod.saiz},
    [`setValue${index%3}`]={setCategColor}
    [`setValue${(index+1)%3}`]={setCategPrice}
    [`setValue${(index+2)%3}`]={setCategSaiz}
    setValueIndex={setIndexImgProd}
    value={categColor}
    headIndex={indexImgProd.headIndex}
    agility={prod.agility[index]}
    prodSecKey: element/10
  }
  return <ProdSelectArr {...elementProps} />
}

您的数据:

let items = [1, 2, 3]

在你的 JSX 渲染中:

return <div>
    ...
    {items.map(getItem)}
    ...
</div>