javascript - 如何重写多余的方法声明并创建更短的方法声明？

Question

我已经声明了相同的 const 值(某种程度上)。这是我到目前为止所拥有的...

import React from 'react'

function Component_a() {
   const x = 5;
   const y = 10;
   const image_a = [...Array(x)].map((e, i) =>
       <div className="image" key={i}>
           <img src="img/image.png" alt="" />
       </div>
   )
   const image_b = [...Array(y)].map((e, i) =>
       <div className="image" key={i}>
           <img src="img/image.png" alt="" />
       </div>
   )
   return (
      {/*some more codes*/}
   )
}

export default Component_a

看起来有点烦人，尤其是当我添加更多像这样的冗余行时。感谢您的帮助。

Answer 1

因为唯一要改变的是数组的长度，所以只需从中创建一个函数，然后调用该函数两次(或根据需要多次调用):

const makeImages = length => Array.from(
  { length },
  (_, i) => (
    <div className="image" key={i}>
      <img src="img/image.png" alt="" />
    </div>
  )
);

function Component_a() {
   const x = 5;
   const y = 10;
   const image_a = makeImages(x);
   const image_b = makeImages(y);
   return (
      {/*some more codes*/}
   )
}