Bolehkah jika...lain... penyataan digunakan dalam fungsi render React?
P粉020556231
P粉020556231 2023-10-10 23:49:38
0
2
523

Pada asasnya, saya mempunyai komponen tindak balas dengan render() badan berfungsi seperti ini: (Ini adalah komponen ideal saya, yang bermaksud ia tidak berfungsi pada masa ini)

render(){
    return (
        <div>
            <Element1/>
            <Element2/>

            // note: logic only, code does not work here
            if (this.props.hasImage) <ElementWithImage/>
            else <ElementWithoutImage/>

        </div>
    )
}


P粉020556231
P粉020556231

membalas semua(2)
P粉985686557

Sebenarnya ada cara untuk melakukan apa yang diminta oleh OP. Hanya render dan panggil fungsi tanpa nama seperti ini:

render () {
  return (
    
{(() => { if (someCase) { return (
someCase
) } else if (otherCase) { return (
otherCase
) } else { return (
catch all
) } })()}
) }
P粉521013123

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.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    
{isLoggedIn ? ( ) : ( )}
); }

Anda juga boleh mengendalikannya di dalam fungsi render, tetapi sebelum mengembalikan jsx.

if (isLoggedIn) {
  button = ;
} else {
  button = ;
}

return (
  
{button}
);

Juga patut disebut adalah apa yang dibangkitkan oleh ZekeDroid dalam komen. Anda boleh menggunakan && 运算符 jika anda hanya menyemak syarat dan tidak mahu memaparkan coretan tertentu yang tidak memenuhi syarat.

return (
    

Hello!

{unreadMessages.length > 0 &&

You have {unreadMessages.length} unread messages.

}
);
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan