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