Adakah mungkin untuk menggunakan penyataan if...else... dalam fungsi render React?
P粉760675452
P粉760675452 2023-08-23 18:27:14
0
2
443
<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>
P粉760675452
P粉760675452

membalas semua(2)
P粉288069045

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>
  )
}
P粉176980522

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>
  );
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!