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!