Verwenden von Bedingungen in einer Array-Map-Schleife (Next.js)

Question

Endergebnis-Benutzeroberfläche

Also ich habe diese Daten

var arr = [1,2,3,4,5,6,7,8]

Ich möchte prüfen, ob der Array-Index ein Vielfaches von 5 ist. Jedes Mal, wenn die Schleife bei Index 0, 5, 10 usw. ist, wird dieser HTML-Code gedruckt <div class="slide-item"><div>{data}</div></div>, aber wenn sie nicht bei Index 0, 5, 10 ist, usw. (was bedeutet, dass es sich an Position 1, 2, 3, 4, 6, 7, 8 usw. befindet) und es wird gedruckt

<div class="slide-item"><div>{data 1}</div><div>{data 2}</div></div><div class="slide-item"><div>{data 3}</div><div>{data 4}</div></div>

Im Grunde entspricht die Benutzeroberfläche des Endergebnisses also dem beigefügten Bild.

Mein erster Versuch ist so

{arr.map((res, index) => {return ({index % 5 === 0 ? (<div className="slide-item"><div>{res}</div></div>): (<div class="slide-item"><div>{data 1}</div><div>{data 2}</div></div>)}

Ich bin mir nicht ganz sicher, wie ich das machen soll. Wenn jemand helfen kann, wäre ich sehr dankbar!

Answer 1

我认为你需要根据res来检查条件，因为索引始终从0开始

试试这个

{
    arr.map((res, index) => {
        return ( res % 5 === 0 
            ? <div className="slide-item"><div>{res}</div></div>
            : <div>
                 <div class="slide-item"><div>{data 1}</div>
                 <div>{data 2}</div></div>
              </div>
         )       
     })
}