Mengapakah saya mendapat ralat \'Parse Ralat: Elemen JSX Bersebelahan Mesti Dibalut dalam Tag Terlampir\' dalam React?

Ralat Parse: Elemen JSX Bersebelahan Mesti Dibalut dalam Tag Terlampir

Apabila memaparkan komponen React, adalah penting untuk mematuhi peraturan bahawa elemen JSX bersebelahan mesti disertakan dalam teg induk. Ralat ini berlaku apabila unsur wujud bersebelahan tanpa dibalut oleh induk yang sama.

Punca Ralat

Kod yang disediakan mengandungi pernyataan if yang secara bersyarat menjadikan dua elemen div berdasarkan nilai pembolehubah this.state.submitted. Walau bagaimanapun, elemen ini bersebelahan dan tidak disertakan dalam mana-mana teg induk.

Penyelesaian

Untuk menyelesaikan ralat ini, bungkus elemen yang diberikan secara bersyarat dalam teg yang disertakan. Ini akan memastikan bahawa struktur JSX adalah sah. Sebagai contoh, anda boleh mengubah suai kod kepada yang berikut:

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        <>
          <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

          <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
            <div className="button-row">
              <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
            </div>
          </ReactCSSTransitionGroup>
        </>
      )}
    </div>
  )
},</code>

Dalam kod yang diubah suai ini, kami telah menyertakan elemen yang diberikan secara bersyarat dalam

tag. Ini memastikan bahawa elemen JSX bersebelahan mempunyai induk yang sah dan ralat diselesaikan.

API Fragments (Pilihan)

Sebagai alternatif kepada menggunakan teg div tambahan, anda boleh menggunakan API Fragments . Ini membolehkan anda mengumpulkan elemen tanpa menambah nod tambahan pada DOM. Kod berikut mempamerkan cara anda boleh menggunakan serpihan:

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        <>
          <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

          <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
            <div className="button-row">
              <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
            </div>
          </ReactCSSTransitionGroup>
        </>
      )}
    </div>
  )
},</code>

Dalam kod ini, kami telah menggunakan komponen untuk membungkus elemen yang diberikan secara bersyarat. Ini mencapai hasil yang sama seperti menggunakan

teg, tetapi ia tidak menambah sebarang nod tambahan pada DOM.

Atas ialah kandungan terperinci Mengapakah saya mendapat ralat \'Parse Ralat: Elemen JSX Bersebelahan Mesti Dibalut dalam Tag Terlampir\' dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

3 minggu yang lalu By DDD

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

3 minggu yang lalu By DDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Sistem Fusion, dijelaskan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1667

14

Tutorial CakePHP

1426

52

Tutorial Laravel

1328

25

Tutorial PHP

1273

29

Tutorial C#

1255

24

Tunjukkan Lagi