Bagaimana Saya Menyelesaikan \"Elemen JSX Bersebelahan Mesti Dibalut dalam Teg Terlampir\" dalam React.js?

Ralat Parse: Menyelesaikan "Elemen JSX Bersebelahan Mesti Dibalut dalam Teg Terlampir"

Apabila cuba membuat komponen secara bersyarat dalam aplikasi React.js, pembangun mungkin menghadapi ralat "Ralat Parse: Elemen JSX bersebelahan mesti dibalut dengan teg yang disertakan." Ini berlaku apabila berbilang elemen JSX diletakkan secara langsung bersebelahan antara satu sama lain tanpa terkandung dalam komponen induk.

Ralat boleh dibetulkan dengan memastikan semua elemen JSX disertakan dalam komponen induk tunggal, seperti yang dilihat di bawah:

// Incorrect: Adjacent JSX elements will result in a parse error
return (
  <Comp1 />
  <Comp2 />
);

// Correct: Enclose elements within a parent component
return (
  <div>
    <Comp1 />
    <Comp2 />
  </div>
);

Sebagai alternatif, API React.Fragment boleh digunakan untuk mencipta komponen induk maya tanpa menambah nod DOM tambahan:

// Fragments allow for grouping JSX elements without adding nodes to DOM
return (
  <React.Fragment>
    <Comp1 />
    <Comp2 />
  </React.Fragment>
);

Oleh melampirkan elemen JSX bersebelahan dalam komponen induk yang sesuai, pembangun boleh menyelesaikan ralat "Elemen JSX Bersebelahan Mesti Dibalut dalam Tag Terlampir" dan memastikan aplikasi React mereka dipaparkan seperti yang diharapkan.

Atas ialah kandungan terperinci Bagaimana Saya Menyelesaikan \"Elemen JSX Bersebelahan Mesti Dibalut dalam Teg Terlampir\" dalam React.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!