Mengapa Elemen JSX Bersebelahan Perlu Melampirkan Teg dalam React.js?

Elemen JSX Bersebelahan Memerlukan Teg Melampirkan

Apabila mencipta komponen React.js, adalah penting untuk memastikan elemen JSX bersebelahan dibalut dalam lampiran teg untuk mengelakkan ralat menghuraikan.

Dalam coretan kod yang disediakan, ralat:

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag

menunjukkan bahawa pemaparan bersyarat pernyataan if menyebabkan elemen div dipaparkan tanpa bekas yang disertakan. Untuk menyelesaikan isu ini, elemen ini perlu dibalut dalam teg yang sesuai, seperti div:

<code class="jsx">if (this.state.submitted === false) {
  return (
    <div>
      <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>

Secara bergantian, anda boleh menggunakan API Fragments untuk mencipta konteks tertutup tanpa menambah elemen yang tidak perlu pada DOM :

<code class="jsx">if (this.state.submitted === false) {
  return (
    <React.Fragment>
      <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>
    </React.Fragment>
  );
}</code>

Atas ialah kandungan terperinci Mengapa Elemen JSX Bersebelahan Perlu Melampirkan Teg dalam React.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!