Adakah mungkin untuk menggunakan penyataan if...else... dalam fungsi render React?
P粉760675452
2023-08-23 18:27:14
<p>Pada asasnya, saya mempunyai komponen tindak balas yang badan fungsinya <code>render()</code> ;
<pre class="brush:js;toolbar:false;">render(){
kembali (
<div>
<Element1/>
<Element2/>
// nota: logik sahaja, kod tidak berfungsi di sini
jika (this.props.hasImage) <ElementWithImage/>
lain <ElementWithoutImage/>
</div>
)
}
</pra>
<p><br /></p>
Sebenarnya ada cara untuk melakukan apa yang diminta oleh OP. Hanya render dan panggil fungsi tanpa nama seperti ini:
Tidak betul-betul sama, tetapi ada penyelesaiannya. Terdapat bahagian tentang pemaparan bersyarat dalam Dokumentasi React yang perlu anda lihat. Berikut ialah contoh perkara yang boleh anda lakukan menggunakan inline if-else.
Anda juga boleh mengendalikannya di dalam fungsi render, tetapi sebelum mengembalikan jsx.
Juga patut disebut adalah apa yang dibangkitkan oleh ZekeDroid dalam komen. Jika anda hanya menyemak syarat dan tidak mahu memaparkan coretan tertentu yang tidak memenuhi syarat, anda boleh menggunakan
&& 运算符
.