Mengapakah saya mendapat ralat \'Parse Ralat: Elemen JSX Bersebelahan Mesti Dibalut dalam Tag Terlampir\' dalam React?-tutorial js-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-11-05 09:36:02

asal

387 orang telah melayarinya

Why am I getting a

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Kekal maju dalam pembangunan web: berita terkini, alatan dan cerapan #57 Artikel seterusnya：Apakah perbezaan antara `window.location.href` dan `window.open()` dalam JavaScript?

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1782

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1927

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1640

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...