Как переписать объявление избыточного метода и создать более короткий? - PullRequest
Новая
       85

Как переписать объявление избыточного метода и создать более короткий?

0 голосов
/ 26 сентября 2019

Я объявил идентичные значения констант (вроде).Вот что у меня есть ... 

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

Это немного раздражает, особенно когда я добавляю больше лишних строк, подобных этой.Спасибо за вашу помощь.

Ответы [ 2 ]

1 голос
/ 26 сентября 2019

Поскольку единственное, что нужно изменить, - это длина массива, просто создайте из него функцию и вызовите эту функцию дважды (или столько раз, сколько вам нужно): 

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*/}
   )
}
0 голосов
/ 26 сентября 2019

Нужно сделать что-то вроде этого, объединить оба массива в один массив и перебрать их 

const [image_a,image_b] = [[...Array(x)],[...Array(y)]].map((v, i) =>
        v.map((e,i)=>
       <div className="image" key={i}>
           <img src="img/image.png" alt="" />
       </div>
     )
 )

Другой подход: если таких массивов много, вам следует использовать функциональный подход 

let getHtml = (arr) => arr.map((e,i)) =>
                     <div className="image" key={i}>
                        <img src="img/image.png" alt="" />
                     </div>

А затем передать ему массив 

   let image_a = getHtml(array1)
...