Adakah mungkin untuk menggunakan penyataan if...else... dalam fungsi render React?

Question

Pada asasnya, saya mempunyai komponen tindak balas yang badan fungsinya render() ;

render(){
    kembali (
        

            
            

            // nota: logik sahaja, kod tidak berfungsi di sini
            jika (this.props.hasImage) 
            lain 

        
    )
}


            

Answer 1

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

render () {
  return (
    <div>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </div>
  )
}

Answer 2

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 (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

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

if (isLoggedIn) {
  button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
  button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
  <div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
  </div>
);

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 && 运算符.

return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );