Dalam fungsi render reaksi saya, saya menggunakan array.map untuk mengembalikan beberapa kode JSX dalam sebuah array dan kemudian merendernya. Ini sepertinya tidak berhasil, saya membaca beberapa pertanyaan di sini yang menyarankan menggunakan pernyataan kembali di dalam blok if/else tetapi itu tidak akan berfungsi dalam kasus saya. Saya ingin memeriksa apakah putaran dan durasi diatur pada setiap elemen array dan hanya kemudian meneruskannya dalam kode BEJ. Bisakah seseorang memberi tahu saya pendekatan yang berbeda.

render() {
 var interviewProcessMapped = interviewProcess.map((item, index) => {

  return
    {item.round ?
        <div className="row title">
          <div className="__section--left"><span className="section-title">Round {index + 1}</span></div>
          <div className="__section--right">
            <h3>{item.round}</h3>
          </div>
        </div>
        : null
    }

    {
      item.durationHours > 0 || item.durationMinutes > 0 ?
        <div className="row">
          <div className="__section--left">Duration</div>
          <div className="__section--right border">
            {item.durationHours > 0 ? <span>{item.durationHours} Hours</span> : null} {item.durationMinutes > 0 ? <span>{item.durationMinutes} Minutes</span> : null}
          </div>
        </div>
        : null
    }
  });

 return <div>{interviewProcessMapped}</div>
}
1
Manav Saxena 18 Agustus 2017, 12:10

2 jawaban

Jawaban Terbaik

{ tidak diperlukan di sini:

return {item.round ?

Jika Anda menggunakannya itu berarti Anda mengembalikan suatu objek.

Masalah lain saja return berarti return; (penyisipan titik koma otomatis) jadi letakkan kondisi di baris yang sama atau gunakan ().

Tulis seperti ini:

render() {
    let a, b;
    var interviewProcessMapped = interviewProcess.map((item, index) => {
        a = item.round ?
                <div className="row title">
                    ....
                </div>
            : null;

        b =  (item.durationHours > 0 || item.durationMinutes > 0) ?
                  <div className="row">
                      ....
                  </div>
              : null;

        if(!a || !b)
            return a || b;
        return [a, b];
    });

    return (....)
}
4
Mayank Shukla 18 Agustus 2017, 09:32

Anda mungkin harus menggunakan kombinasi Array.prototype.map() dan Array.prototype.filter()

Tidak perlu if sama sekali

Berikut kode semu:

interviewProcess.filter(() => {
    // return only if round and duration set
}).map(() => {
    // transform the filtered list
});
0
Marco Magrini 18 Agustus 2017, 09:21