Paparkan senarai objek dengan sifat dalam JSX

Question

Saya mempunyai kod berikut dalam komponen React saya:

<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) ==> {
                       
})

Jadi kod div yang dihasilkan ialah:

<div className="pkgList">
                {pkgData.map((p) =>
                    <h3 key={p.name}>{p.name}</h3>
                    {p.peta((c) => {
                        
                    })
                )}
            </div>

Apl My React tidak dibenarkan untuk disusun dengan jayanya.

Answer 1

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>

Answer 2

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