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

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