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

<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>