Rumah > Soal Jawab > teks badan
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>
P粉2872545882023-09-03 15:36:54
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) => { ... } )}
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