Mengapakah Saya Mendapat \"Ralat Parse: Elemen JSX Bersebelahan Mesti Dibalut dalam Teg Terlampir\" dalam React?

Ralat Penghuraian: Elemen JSX Bersebelahan Mesti Dibungkus dalam Tag Terlampir

Isu:
Apabila mencuba untuk menjadikan komponen secara bersyarat berdasarkan pembolehubah, ralat berlaku: "Ralat Parse: Elemen JSX bersebelahan mesti dibalut dalam teg yang disertakan."

Soalan:
Apakah yang menyebabkan ralat ini dan bagaimanakah ia boleh diselesaikan?

Jawapan:
Dalam React, setiap komponen atau kumpulan komponen mesti disertakan dalam satu tag. Dalam kod yang disediakan, pemaparan bersyarat menyebabkan elemen JSX bersebelahan (dalam kes ini, input dan komponen ReactCSSSTransitionGroup) muncul tanpa teg yang disertakan.

Penyelesaian:
Untuk menyelesaikan ralat, bungkus elemen ini dalam teg lampiran yang sesuai, seperti

atau React.Fragment.

Contoh:

<code class="jsx">render: function() {
    return (
      <div>
        {this.state.submitted == false && (
          <>
            <input type="email" onChange={this._updateInputValue} />
            <ReactCSSTransitionGroup>
              <div>
                <a href="#" onClick={this.saveAndContinue}>Request Invite</a>
              </div>
            </ReactCSSTransitionGroup>
          </>
        )}
      </div>
    );
  },</code>

Menggunakan pembungkus menyediakan pilihan neutral yang ringan dan semantik untuk mengumpulkan elemen tanpa memperkenalkan nod DOM tambahan.

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

for Error using Conditional dom this input

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn