Katakanlah saya harus memisahkan div dan prop. Saya perlu menyebarkan prop ke dua div terpisah. Mengingat fungsinya:

function Collection(props) {
   const coll = props.coll
   const coll_list = coll.map((coll, index) => {
      return (
         <span key={index}>{coll}</span>
      )
   })

   return (
      <div className="main_div">
         <div className="div_a">
            {coll_list}
         </div>
         <div className="div_b">
            {coll_list}
         </div>
      </div>
   )
}

Hasilnya harus seperti ini:

<div className="main_div">
   <div className="div_a">
      <span>item_1</span>
      <span>item_2</span>
      <span>item_3</span>
   </div>
   <div className="div_b">
      <span>item_4</span>
      <span>item_5</span>
      <span>item_6</span>
   </div>
</div>

Saya akan menghargai semua jawaban. Terima kasih.

1
Dave Moreno 21 September 2019, 13:01

1 menjawab

Jawaban Terbaik

Jika Anda hanya perlu membagi menjadi 2 daftar daripada Anda dapat menemukan bagian tengah dan membagi array menjadi 2 bagian:

function Collection(props) {
   const coll = props.coll.map((coll, index) => (<span key={index}>{coll}</span>));
   const middle = Math.floor(coll.length / 2);
   const coll_list_a = coll.slice(0, middle);
   const coll_list_b = coll.slice(middle, coll.length);

   return (
      <div className="main_div">
         <div className="div_a">
            {coll_list_a}
         </div>
         <div className="div_b">
            {coll_list_b}
         </div>
      </div>
   )
}

Jika Anda menginginkan solusi yang lebih kuat untuk dipecah menjadi bagian-bagian dengan panjang n, Anda dapat mengiris array menjadi potongan-potongan dan membuat daftar secara dinamis:

function chunkify(arr, n){
    let index = 0;
    const len = arr.length;
    const chunks = [];

    for (index = 0; index < len; index += n) {
        chunks.push(arr.slice(index, index + n));
    }

    return chunks;
}

function Collection(props) {
   const coll = props.coll.map((coll, index) => (<span key={index}>{coll}</span>));
   const chunks = chunkify(coll)

   return (
      <div className="main_div">
         {
            chunks.map((list, index) => (
               <div key={index} className={"div_" + index}>
                  {list}
               </div>
            ))
         }
      </div>
   )
}
2
Lior Hai 23 September 2019, 08:55