Saya mencoba mengatur React.js
aplikasi saya sehingga hanya merender jika variabel yang saya setel adalah true
.
Cara fungsi render saya diatur terlihat seperti:
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>
if(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>
)
},
Pada dasarnya, bagian penting di sini adalah if(this.state.submitted==false)
bagian (saya ingin div
elemen - elemen ini muncul ketika variabel yang dikirimkan diatur ke false
).
Tetapi ketika menjalankan ini, saya mendapatkan kesalahan dalam pertanyaan:
Uncaught Error: Parse Error: Line 38: Elemen JSX yang berdekatan harus dibungkus dengan tag terlampir
apa yang terjadi disini? Dan apa yang bisa saya gunakan untuk membuat ini bekerja?
javascript
reactjs
render
pengguna1072337
sumber
sumber
Jawaban:
Anda harus meletakkan komponen Anda di antara tag penutup, yang berarti:
Sebagai gantinya:
Sunting: Per komentar Joe Clay tentang Fragmen API
sumber
Sudah terlambat untuk menjawab pertanyaan ini, tetapi saya pikir itu akan menambah penjelasan.
Ini terjadi karena di mana pun dalam kode Anda, Anda mengembalikan dua elemen secara bersamaan.
misalnya
Itu harus dibungkus dengan elemen induk . misalnya
Penjelasan Lebih Lengkap
jsx
Kode di bawah Anda ditransformasikandalam hal ini
Tetapi jika Anda melakukan ini
ini akan dikonversi menjadi ini (Hanya untuk tujuan ilustrasi, sebenarnya Anda akan mendapatkan
error : Adjacent JSX elements must be wrapped in an enclosing tag
)Dalam kode di atas Anda dapat melihat bahwa Anda mencoba untuk kembali dua kali dari pemanggilan metode, yang jelas salah.
Edit- Perubahan terbaru dalam Bereaksi 16 dan memiliki-bangsal sendiri:
Jika Anda tidak ingin menambahkan div tambahan untuk membungkusnya dan ingin mengembalikan lebih dari satu komponen anak, Anda dapat menggunakannya
React.Fragments
.React.Fragments
sedikit lebih cepat dan memiliki lebih sedikit penggunaan memori (tidak perlu membuat simpul DOM tambahan, pohon DOM kurang berantakan).mis. (React 16.2.0)
atau
atau
sumber
Elemen reaksi harus mengembalikan hanya satu elemen. Anda harus membungkus kedua tag Anda dengan tag elemen lain.
Saya juga dapat melihat bahwa fungsi render Anda tidak mengembalikan apa pun. Beginilah tampilan komponen Anda:
Perhatikan juga bahwa Anda tidak dapat menggunakan
if
pernyataan di dalam elemen yang dikembalikan:sumber
Jika Anda tidak ingin membungkusnya dengan div lain seperti yang disarankan oleh jawaban lain, Anda juga dapat membungkusnya dalam array dan itu akan berfungsi.
Itu dapat ditulis sebagai:
Harap perhatikan bahwa hal di atas akan menghasilkan peringatan:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'YourComponent'.
Ini dapat diperbaiki dengan menambahkan
key
atribut ke komponen, jika menambahkan secara manual ini menambahkannya seperti:Berikut adalah beberapa informasi lebih lanjut tentang kunci: Komposisi vs Warisan
sumber
Masalah
Ini berarti bahwa Anda mencoba mengembalikan beberapa elemen JSX saudara dengan cara yang salah. Ingatlah bahwa Anda tidak menulis HTML, tetapi JSX! Kode Anda diubah dari JSX ke JavaScript. Sebagai contoh:
akan diubah menjadi:
Kecuali Anda baru mengenal pemrograman pada umumnya, Anda sudah tahu bahwa fungsi / metode (dari bahasa apa pun) mengambil sejumlah parameter tetapi selalu hanya mengembalikan satu nilai. Karena itu, Anda mungkin dapat melihat bahwa masalah muncul ketika mencoba mengembalikan beberapa komponen saudara berdasarkan cara
createElement()
kerjanya; hanya membutuhkan parameter untuk satu elemen dan mengembalikannya. Karenanya kami tidak dapat mengembalikan beberapa elemen dari satu panggilan fungsi.Jadi jika Anda pernah bertanya-tanya mengapa ini bekerja ...
tapi bukan ini ...
itu karena di potongan pertama, kedua
<p>
-elements adalah bagian darichildren
dari<div>
-element. Ketika mereka adalah bagian darichildren
maka kita dapat mengekspresikan sejumlah elemen saudara. Lihatlah bagaimana ini akan transparan:Solusi
Bergantung pada versi Bereaksi yang Anda jalankan, Anda memiliki beberapa opsi untuk mengatasinya:
Gunakan fragmen (Hanya Reaksi v16.2 +!)
Pada React v16.2, React memiliki dukungan untuk Fragmen yang merupakan komponen tanpa node yang mengembalikan anak-anaknya secara langsung.
Mengembalikan anak-anak dalam array (lihat di bawah) memiliki beberapa kelemahan:
Ini dihilangkan dari penggunaan fragmen. Berikut adalah contoh anak-anak yang dibungkus dalam sebuah fragmen:
yang mengubah gula menjadi:
Perhatikan bahwa cuplikan pertama membutuhkan Babel v7.0 atau lebih tinggi.
Kembalikan array (Hanya Reaksi v16.0 +!)
Pada React v16, React Components dapat mengembalikan array. Ini tidak seperti versi React sebelumnya yang mengharuskan Anda membungkus semua komponen saudara dalam komponen induk.
Dengan kata lain, sekarang Anda dapat melakukan:
ini mentransformasikan menjadi:
Perhatikan bahwa di atas mengembalikan array. Array adalah Elemen Bereaksi yang valid sejak Bereaksi versi 16 dan yang lebih baru. Untuk React versi sebelumnya, array bukanlah objek pengembalian yang valid!
Perhatikan juga bahwa yang berikut tidak valid (Anda harus mengembalikan array):
Bungkus elemen dalam elemen induk
Solusi lain melibatkan pembuatan komponen induk yang membungkus komponen saudara di dalamnya
children
. Sejauh ini, ini adalah cara paling umum untuk mengatasi masalah ini, dan berfungsi di semua versi Bereaksi.Catatan: Lihat lagi di bagian atas jawaban ini untuk detail lebih lanjut dan bagaimana hal ini transparan .
sumber
v16.4
contoh pertama tidak bekerja menggunakan<>
<React.Fragment>
Bereaksi 16.0.0 kita dapat mengembalikan beberapa komponen dari render sebagai sebuah array.
Bereaksi 16.4.0 kami dapat mengembalikan beberapa komponen dari render dalam tag Fragmen. Pecahan
Future Bereaksi Anda akan dapat menggunakan sintaks singkatan ini. (banyak alat belum mendukungnya sehingga Anda mungkin ingin menulis secara eksplisit
<Fragment>
sampai alat tersebut menyusul.)sumber
,
antara komponen. Ini adalah array sehingga Anda perlu memisahkan setiap elemen di dalamnya.<Fragment>
, itu<React.Fragment>
. mengatakan demikian di tautan Anda sendiriimport React { Fragment } from 'react';
maka Anda menggunakannya seperti ini<Fragment >
Jika Anda tidak membungkus komponen Anda maka Anda dapat menulisnya seperti yang disebutkan di bawah metode ini.
Dari pada:
Anda dapat menulis ini:
sumber
itu sangat sederhana kita dapat menggunakan div elemen induk untuk membungkus semua elemen atau kita dapat menggunakan konsep Komponen Orde Tinggi (HOC) yaitu sangat berguna untuk bereaksi aplikasi js
atau cara terbaik lainnya adalah HOC sangat sederhana tidak terlalu rumit cukup tambahkan file hoc.js di proyek Anda dan cukup tambahkan kode-kode ini
sekarang impor file hoc.js di mana Anda ingin menggunakan, sekarang alih-alih membungkus dengan elemen div kita bisa membungkus dengan hoc.
sumber
Ada aturan dalam bereaksi bahwa ekspresi JSX harus memiliki tepat satu elemen terluar.
salah
benar
sumber
Bereaksi 16 mendapat pengembalian Anda sebagai array sehingga harus dibungkus oleh satu elemen seperti div.
Pendekatan yang Salah
Pendekatan Benar (Semua elemen dalam satu div atau elemen lain yang Anda gunakan)
sumber
Komponen yang bereaksi harus dibungkus dalam wadah tunggal, yang mungkin berupa tag apa pun, mis. "<Div> .. </ div>"
Anda dapat memeriksa metode render ReactCSSTransitionGroup
sumber
Impor tampilan dan bungkus
View
. Membungkus dalamdiv
tidak berhasil untuk saya.sumber
View
bukanlah solusi yang terbaik.Tidak valid: Tidak hanya elemen anak
Valid: Elemen root di bawah elemen anak
sumber
Untuk pengembang Rect-Native. Saya mengalami kesalahan ini saat renderingItem di FlatList. Saya memiliki dua komponen Teks. Saya menggunakan mereka seperti di bawah ini
Tetapi setelah saya memasukkan komponen Inside View ini, itu berhasil untuk saya.
Anda mungkin menggunakan komponen lain tetapi memasukkannya ke dalam View mungkin berhasil untuk Anda.
sumber
View
bukanlah solusi yang terbaik.Saya pikir komplikasi juga dapat terjadi ketika mencoba untuk bersarang beberapa Div dalam pernyataan kembali. Anda mungkin ingin melakukan ini untuk memastikan komponen Anda dirender sebagai elemen blok.
Berikut adalah contoh rendering beberapa komponen yang benar, menggunakan beberapa div.
sumber
Saya punya masalah yang menghasilkan kesalahan ini yang tidak semuanya jelas.
Dan di sini ada perbaikan ...
Sosok pergi. Info dibagikan di sini kalau-kalau ada orang lain yang menabrak gundukan ini. Tampaknya, Anda tidak dapat memiliki nama kelas elemen yang sama dengan nama fungsi orangtuanya yang Bereaksi.
sumber