Adakah Next.js menyokong pemaparan bersyarat dan prapemarahan HTML yang tidak dipaparkan?
P粉450744515
P粉450744515 2023-08-14 17:48:55
0
1
546
<p>Next.js pra-memaparkan HTML pada halaman yang hanya dipaparkan apabila butang tertentu diklik? Sebagai contoh, apabila kita mempunyai tab, adakah ia memaparkan kandungan tab yang belum dipaparkan? </p>
P粉450744515
P粉450744515

membalas semua(1)
P粉011684326

Bukan sahaja untuk Next.js tetapi juga untuk React, ia bergantung pada cara anda menunjukkan/menyembunyikan komponen secara bersyarat, terutamanya jika ia disembunyikan oleh CSS atau JavaScript. Berikut adalah contoh:

// 1. 返回一个空片段或组件
const Component1 = ({ isVisible }) => {
  if (!isVisible) return <></>;
  return (
    <div>Hello World</div>
  )
}

// 2. 改变display属性
const Component2 = ({ isVisible }) => {
  const display = isVisible ? "flex" : "hidden";
  return (
    <div style={{ display }}>Hello World</div>
  )
}
  1. Dalam contoh pertama, apabila isVisible属性设置为false serpihan kosong akan dipaparkan. Serpihan kosong tidak akan menghasilkan sebarang HTML.

  2. Dalam contoh kedua, kami hanya menukar sifat display CSS mengikut atribut, dan HTML yang dijana akan tetap disertakan dalam HTML anda tanpa kelihatan.

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