Rumah >hujung hadapan web >tutorial js >Mengapakah saya mendapat ralat \'Parse Ralat: Elemen JSX Bersebelahan Mesti Dibalut dalam Tag Terlampir\' dalam React?
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.
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.
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
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 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!