cari

Rumah  >  Soal Jawab  >  teks badan

Paparkan senarai objek dengan sifat dalam JSX

<p>Saya mempunyai kod berikut dalam komponen React saya: </p> <pre class="brush:php;toolbar:false;"><div className="mainApp"> <div className="pkgsList"> {pkgData.map((p) => <h3 key={p.name}>{p.name}</h3> )} </div> </div> )</pra> <p>Dalam kes ini, <code>pkgData</code> ialah susunan objek yang cuba menerangkan pakej dalam senario ini. Setiap objek mengandungi sifat rentetan <kod>nama</kod> dan sifat tatasusunan <kod>sumber</kod>, di mana setiap item juga merupakan objek. Saya ingin mencetak item dalam <code>sources</code> di bawah elemen <code>h3</code> HTML/JSX Berbilang di atas - sebarang bantuan akan sangat dihargai. </p> <p>Saya telah cuba memanggil peta untuk setiap p, tetapi sama ada saya membungkusnya dengan <code>()</code> atau hanya <code>{}</code> Saya mendapat Ralat</p> <pre class="brush:php;toolbar:false;">{p.map(s) ==> { })</pre> <p>Jadi kod div yang dihasilkan ialah: </p> <pre class="brush:php;toolbar:false;"><div className="pkgList"> {pkgData.map((p) => <h3 key={p.name}>{p.name}</h3> {p.peta((c) => { }) )} </div></pre> <p>Apl My React tidak dibenarkan untuk disusun dengan jayanya. </p>
P粉486743671P粉486743671537 hari yang lalu523

membalas semua(2)saya akan balas

  • P粉903052556

    P粉9030525562023-09-03 16:50:30

    Seperti komponen biasa, anda hanya boleh mengembalikan 1 elemen jsx dalam peta. Jika anda ingin memaparkan berbilang elemen dalam fungsi peta, anda boleh membungkus kod dalam coretan tindak balas seperti ini:

    <div className="mainApp">
        <div className="pkgsList">
            {pkgData.map((p) => (
                <> {/* <- this is a fragment */}
                    <h3 key={p.name}>{p.name}</h3>
                    {p.sources.map((s) => (
                        <>{/* render source here */}</>
                    ))}
                </>
            ))}
        </div>
    </div>

    balas
    0
  • P粉287254588

    P粉2872545882023-09-03 15:36:54

    Ralat peta

    Pertama sekali, peta bersarang anda di dalam pkgData.map adalah salah. Kerana p itu sendiri bukan array. Peta sepatutnya kelihatan seperti ini,

    {p.sources.map((c) => {
        ...
        }
      )}

    JSX Ralat

    Kedua, seperti yang @David katakan dalam ulasan, anda tidak boleh mempunyai berbilang elemen peringkat atas kerana cara JSX berfungsi di bawah hud. Contohnya kod

    <div className="mainApp">
      <div className="pkgsList">
        {pkgData.map((p) => 
          <h3 key={p.name}>{p.name}</h3>                    
        )}
      </div>
    </div>

    Setaraf dengan ini

    <div className="mainApp">
      <div className="pkgsList">
        {pkgData.map((p) => {
          return React.createElement("h3", {key: p.name}, p.name)
          }                    
        )}
      </div>
    </div>

    Jadi, jika anda mengembalikan berbilang elemen JSX di peringkat atas, React.createElement tidak akan berfungsi. Oleh itu, anda harus membalut kandungan di peringkat atas menggunakan beberapa teg seperti serpihan(<>), div, dsb.

    Sebagai contoh,

    <div className="mainApp">
      <div className="pkgsList">
        {pkgData.map((p) =>
          <>
            <h3 key={p.name}>{p.name}</h3>
            {p.sources.map((c) => 
              <p>{c.something}</p>
            )} 
          </>
        )}
      </div>
    </div>

    Untuk rujukan sahaja: https://react.dev/reference /react/createElement#creating-an-element-without-jsx

    balas
    0
  • Batalbalas