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

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*/}

   )

}