Bolehkah jika...lain... penyataan digunakan dalam fungsi render React?

Question

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

//note:logiconly,codedoesnotwork hereif(this.props.hasImage)e

P粉985686557 · Answer

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 · Answer

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.
        
      }
    
  );