Mengingat array yang panjangnya genap, saya mencoba menemukan metode bersih menggunakan React untuk meletakkan setengah array dalam satu tag div dan di dalamnya, setiap elemen harus dalam tag rentang, dan sama untuk separuh lainnya. Misalnya, mengingat array angka 1 hingga 6, output yang diberikan harus:

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
<div>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</div>

Masalah utama adalah berurusan dengan JSX yang dikombinasikan dengan JS, saya tidak tahu bagaimana mencapai hasil ini karena beberapa loop dalam tampaknya harus digunakan dan itu mengganggu JSX yang dikembalikan.

Saya juga perlu ini diperluas untuk melakukan fungsi serupa dengan memisahkan array ke jumlah tag <div> yang berbeda, mis. 3 tag <div> dengan masing-masing 2 tag <span>.

Bagaimana kita bisa mencapai ini dengan cara yang bersih?

1
Oren 23 Desember 2020, 16:22

3 jawaban

Jawaban Terbaik

Anda dapat menggunakan _.chunk() dari lodash untuk membagi array:

const array = [1, 2, 3, 4, 5, 6];
const n=2;

render() {
    return _.chunk(array, [size=n]).map(subArray => <div>{subArray.map(i => <span>i</span>}</div>);
}
1
namgold 23 Desember 2020, 13:36

Anda dapat melakukannya seperti ini:

const arr = [1, 2, 3, 4, 5, 6];
.....

// Inside some JSX components render method
{[arr.slice(0, arr.length / equalParts),
  arr.slice(arr.length / equalParts - 1, arr.length)].map(
  (half, index) => (
    <div key={`outer_${index}`}>
      {half.map((item, index) => (
        <span key={`inner_${index}`}>{item}</span>
      ))}
    </div>
  ),
)}

Untuk bagian kedua dari pertanyaan, Anda dapat mengekstraknya ke suatu fungsi:

const splitAndRender = (arr: number[], equalParts: number) => {
  const slices = [];

  const innerLength = arr.length / equalParts;

  for (let i = 0; i < equalParts; i++) {
    slices.push(arr.slice(i * innerLength, (i + 1) * innerLength));
  }

  return slices.map((half, index) => (
    <div key={`outer_${index}`}>
      {half.map((item, index) => (
        <span key={`inner_${index}`}>{item}</span>
      ))}
    </div>
  ));
};

Dan gunakan fungsi seperti:

const arr = [1, 2, 3, 4, 5, 6];
.....

{splitAndRender(arr, 3)}
1
Lazar 23 Desember 2020, 13:48

Di Bereaksi perlu menutup tag sebaris jadi saya menemukan cara ini (tidak terlalu berkinerja):

const TMP = ({data,splitby}) => {
  let transformedData = data.reduce((r,v,i)=>{
    if (i%splitby)
      r[r.length-1].push(v)
    else r.push([v]);
    return r
  },[])

  return <div>
     {
       transformedData.map((v,index)=>(
         <div key={`div-$index`}>
           {
             v.map((s,idx)=> <span key={`div-${index}-span-${idx}`}>{s}</span>)
           }
         </div>
        ))
     }
  </div>
};

ReactDOM.render(
  <TMP data={Array.from({length: 25}, (v, i) => i)} splitby={3}/>,
  document.getElementById("tmp_root")
);
div {
  border: 1px solid tomato;
}

span {
  display: block;
  border:1px solid silver;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="tmp_root"></div>
1
cybercoder 23 Desember 2020, 14:48